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

此時就會給提示：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
 - webpack-command (https://github.com/webpack-contrib/webpack-command)
   A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

如果是我沒有全局裝，我肯定會意識到要選一個，這個坑關鍵是我全局裝了。所以就在那折騰半天。

其實官方文檔開頭就說明了。

npm install webpack webpack-cli --save-dev

安裝完成之后，繼續執行發現有warning：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

mode規則

配置規則：必須在production 和 development之間選擇一種,以便webpack 使用相應模式的內置優化

1. production支持所有類型的優化已生成最優bundles
2. development允許注釋、提示和eval devtool devtool的差別可以參考這里
3. production不支持watching、development針對快速增量重建進行了優化
4. production支持 module concatenating（Scope Hoisting）即作用域提升，可以將模塊打包在一個函數里，這樣減少了函數聲明，文件體積也會減小。 詳細參考看這里
5. process.env.NODE_ENV被設置用來區分環境（僅僅在構建代碼而非config里面)
6. 有一個hidden none mode的模式可以禁用所有內容

用法：

1、配置文件中：

module.exports = {entry: Entrys,mode: 'development'}

2、cli 參數傳入

webpack --mode=development

兩種方式都是可行的，不過我遇到過一個很坑的問題，困擾自己好幾天，最后知道真相的自己眼淚掉下來后面再提這個問題。

零配置快速開始

因為一直被吐槽配置太累，加上parcel給的壓力，webpack4也支持零配置打包了。

如果沒有配置文件，會默認以./src/index.js作為entry開始打包。

如果配置了webpack.config.js或者指定了--config 的文件路徑，則依據對應配置文件開始。

問題表現

在webpack.config.js中配置了entry、mode等相關屬性，配置文件如下：

module.export = {  mode:'production',  entry:{    app:'./src/test.js',    index:'./src/test.js'  },  output: {    path: process.cwd() + '/dist',    filename: '[name].[hash].js',    chunkFilename: '[name].[chunkhash].js',    crossOriginLoading: 'anonymous'  },  cache: true,  devtool: 'cheap-source-map',  externals: {    jquery: 'jQuery'  },  module: {    rules: [      {        test: //.(js|jsx)?$/,        include: [          path.resolve(__dirname, "../src")        ],        exclude: [          'node_modules',          path.resolve(__dirname, "../node_modules")        ],        use: [          {            loader: 'babel-loader',            options:{              presets:['es2015']            }           }        ]      }    ]  },  resolve: {    modules: [      'node_modules'    ],    extensions: [".js", ".json", ".jsx", ".css"],  },  devServer: {    proxy: { // proxy URLs to backend development server      '/api': 'http://localhost:3000'    },    contentBase: path.resolve(__dirname, "../dist"),    hot: true,    open:true  },  plugins: [    new CleanWebpackPlugin(['dist']),    new HtmlWebpackPlugin({      title:'test'    }),    new webpack.HotModuleReplacementPlugin()  ]}

package.json命令配置:

"scripts": {  "build": "webpack --config webpack.prod.js" }//執行打包npm run build

發現始終會有上面選擇mode類型的提示，這讓人不能接受，另外提示沒有./src/index.js文件，但是我的配置入口是別的文件，這樣讓人很莫名

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/****'

本著跟著提示解決問題的原則，少文件那就建一個唄(后來發現這種思維有時候有用，有時候還真要慎重)，問題表現雖然一致，實質可能有所不同。

新建之后是可以運行了但是我們的配置文件好像沒起作用，

dist下的打包文件是默認的main.js

而非我們指定的app和index

為了確保進入配置文件，我打了幾個log，竟然都有輸出，說明進去了，這問題就詭異了。

console.log(path.resolve(__dirname, './src')) //輸出正確路徑module.export = {    //*****//  }

版本統一

初步猜想是版本問題，確實也有issue上提到過某些版本存在問題，對照著官方demo鎖定版本之后問題依然存在。

猜測：應該是配置文件存在錯誤

配置檢查

將官方最基本的配置拉進來拷貝進來試了一下，依然存在問題沒能解決。

猜測：本地的環境存在問題，npm，node等版本

查看之后發現版本都是滿足的。

運行demo

將demo拉到本地并啟動，demo正常打包，說明本地環境是ok的。那么問題就明顯了，我的配置文件或者項目搭建有問題，對照著demo的配置項，配置項沒有明顯問題，這樣的話將，配置信息放入到demo中去，修改之后發現起作用，我又重新審視了下我的配置文件，不僅僅局限于配置部分的時候，發現

//我的寫法，這樣webpack拿到的就是undefined了。module.export//別人的demomodule.exports

webpack的兼容處理

webpack會將 webpack --config 傳入的文件與本身默認配置進行merge，保證本身打包不出錯。為了證明我們的推論，將配置文件只剩下output屬性，并加上src/index.js

module.exports = {  output: {    path: process.cwd() + '/dist1',    // 直接的入口模zzz塊名    filename: '[name].js',    // 非入口模塊，也就是不需要打包到一起的，但又可能會用到，    // 這不就是按需加載的么    chunkFilename: '[name].[chunkhash].js',    crossOriginLoading: 'anonymous'  }}

執行之后會發現打包到/dist1下面。所以上面寫錯module.exports的時候，走的完全是默認配置。前面的log打在了module.exports之前執行是正確的。

結尾

當遇到不可思議的問題的時候，建議靜下心看一看，不要盲目搜索，另外最可靠的參考就是官方文檔和實例，注意對比版本和環境，如果都沒問題，那么再去嘗試網上的各種解決方法。

這里總結一下給自己一個記錄，希望解決思路能幫助其他人。也希望大家多多支持VeVb武林網。