窮得只剩技術

通常開發跟最終的輸出會有一定差距

像是在開發時需要自動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參數的話

之前就要用 –