webpack@4.x的變化

先來說下webpack4和之前版本里一些主要的變化：

1、webpack不再支持node v4，這是因為新的webpack和附屬插件使用了es6的語法，v4版本對es6不是很到位，所以，就不伺候了。

2、開始采取約定優于配置的思路，webpack@4.x里把很多選項都設置了默認值，比如入口就是./src，輸出目錄就是./dist，當然如果你自己去設置，它也不會攔著。所以在用webpack@4.x的時候，我們甚至都可以沒有webpack.config.js這個配置文件也能一樣打包。

3、拆分了舊版本里的webpack，分成了用來處理邏輯的webpack和提供可執行命令的webpack-cli，這也是有的同學把webpack裝成新版本以后會報找不到webpack-cli模塊這個錯誤的原因。

4、添加了mode選項，用來區分編譯的環境，提供了development、production和none三個選項，理論上這個選項是強制指定的，其實不指定的話它也是有默認值的，但會給出一個warning，官方這么強烈建議了，就顯式的指定一下吧。指定方式有兩種，一是在啟動命令里：

./node_modules/.bin/webpack --mode production

另外一種就是在配置文件里指定，方式如下：

var config = {  mode: 'production' // 可選development、production和none}

5、配置上的變動，類似刪除了commonChunksPlugin，用optimization來代替這種。還有loader的用法也和1.15.0不一樣了，但這個升級是在之前版本里就有的，不是webpack@4.x帶來的。

6、性能優化，提高了打包性能。另外從webpack2起，引入了Tree-shaking機制來提出沒有被引用的模塊。它的原理是按著引用關系重新建立一個新的依賴樹，而沒有被引用的模塊就不會被打包到最后的代碼里。之前的壓縮優化方式是先把所有模塊都掛到樹上，然后通過分析后，刪掉沒被引用的模塊。從字面意思來看，我覺得原來的方式更像在搖樹，把沒用的搖下來。這兩種方式最后壓縮完的結果可能類似，但設計思路完全是從兩個方向走的。

7、其他。以上這些就是一些比較主要的變化，更詳細的升級文檔可以參考下官方的說明：https://github.com/webpack/webpack/releases

前言

升級webpack4，一定要去看文檔，特別是 更新說明 ，不要自持用過原本webpack就自己開始折騰。折騰到后面，可能就默默流下眼淚了。

webpack4的變化

webpack-cli抽離

webpack-cli被單獨拆了出來，使用的時候如果只是全局裝了CLI，直接執行的時候是可以的。

webpack --config ./config/webpack.dev.js

如果是寫在npm hook里面會發現有點問題：

//package.json"scripts": {  "dev": "webpack --config ./config/webpack.dev.js" }//shallnpm run dev