webpack架設2 – 前置作業

 
  這篇記錄架設一個webpack專案之前的前置作業,我只會vue,所以這裡例子用vue說明。

  主要4個步驟。

 

  1. 安裝node.js (完成後自動安裝npm (Node Package Manager)
  2. 創建專案資料夾(directory)
  3. 初始化專案
  4. 使用npm安裝vue

 

  1. 安裝node.js (完成後自動安裝npm (Node Package Manager)

  下載| Node.js

 

  選擇基本款的windows安裝包即可(使用win10x64)

  安裝完成之後使用cmd(命令提示字元)檢查版本號,有東西就表示安裝成功。
  node –v

 
  如果安裝完卻得到 'node不是內部或外部命令、可執行的程式或批次檔 的錯誤訊息,

  主要應該是因為環境變數沒有設定的問題,

  具體怎麼操作直接google錯誤訊息就會有很多相關文章,這邊不贅述。

 

  提到npm,就順便提一下nvm(Node Version Manager)

  NVM是 Node.js 的版本管理工具。

  由於Node.js 發展快速,迭代頻繁,

  所以如果會有同時間在不同專案配置不同版本Node.js的需求,

  使用NVM會比較方便進行版控與版本切換。

 

  2. 創建專案資料夾(directory)

  嗯,就是,建一個專案資料夾。不過記得別直接把名字取叫做webpackXDDD

 

  3. 初始化專案

    npm init -y

 

  -y 會將需要回答的問題一次性略過, package.json 中,日後可以修改。

  結束之後npm會幫我們自動新增一個package.json的檔案。

  可以看一下package.json,

  先簡單配置個script指令build

 

 {
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" 
  },
  "author": "",
  "license": "ISC"
}

 

  4. 使用npm安裝vue

  npm install vue --save 

  執行完成後會自動安裝node_modules,

  其中,install 也可以簡寫為 i

 

  安裝時,除了 --save,也可以寫簡稱 -S,表示現在安裝的這個套件,到了正式環境也依然會用到。

  --save-dev / -D: 安裝開發時用的工具
  --save / -S : 上線時(正式環境)必要的套件

 

  安裝完成之後都可以在 package.json中看到套件及其版本號,

  dependencies中放的是到了正式環境也要用的套件,也就是你下--save 或是 -S的,

  devDependencies則是放--save-dev或-D的套件。

 

  如果只有npm i (pluginName),那麼默認是 npm i (pluginName) --save,

  會被歸類在package.json的 dependencies裏頭。

 

  到目前為止,都還沒辦法npm run build,

  因為(我覺得)打包的精隨,webpack.config.js你還沒配置!!

  下一篇來講其他細節與webpack.config.js。

 

 

 

參考資料

[Node.js] 安裝 NVM (Node Version Manager) 來切換 Node.js 版本 for Windows

vue + webpack 起手式

[npm]dependencies 與devDependencies 的區別