通常開發跟最終的輸出會有一定差距
像是在開發時需要自動compile
或是autoreload
而最終的輸出會需要minify
所以這時候的webpack指令就會不同
一般不使用config的使用方法是
webpack entry.js output.js
如果有webpack.config.js的話
只需要輸入webpack他就會自動讀取config
但每次只要一修改就要重新build一次
非常麻煩
所以webpack有提供 –watch 的選項
webpack --watch
這選項會監聽所有檔案的改變
只要一有改變就會自動重新build
而develop跟production環境的差異
可以用一個環境變數來區別
像是
NODE_ENV=production webpack
這時候就可以在webpack.config.js裡面讀取這個環境變數
var isProduction = process.env.NODE_ENV === "production";
藉由這個變數就可以控制develop要做哪些事
production要做哪些事了
最後將這些會一直用到的指令整合進npm script裡
好處是不用記這些
只需要
npm run xxx
在npm init之後
會發現其中有個script欄位
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
這裡就是在定義要跑的指令
所以在這就定義dev跟prod要做的事吧
"scripts": {
"dev": "./node_modules/.bin/webpack",
"prod": "NODE_ENV=production ./node_modules/.bin/webpack",
"watch": "npm run dev -- --watch"
},
這樣以後只需要
npm run dev
或是
npm run prod
就可以build出不同版本的檔案
最後一個watch
中間有一個–
根據官方文件
The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script
如果直接把參數接在後面是無效的
要使用 – 符號才會接上後面的指令
所以要加上 –watch參數的話
之前就要用 –