webpack@v4升級踩坑

以前看到各大公衆號都在狂推 webpack 新版發佈的相關內容，以前就嘗試了升級，因爲部分插件的緣由，未能成功，如今想必過了這麼久已經能夠了，今天就來試一下在個人項目中升級會遇到哪些坑。

查閱更新日誌

在安裝更新以前，先大體瀏覽了一下更新日誌，對大部分用戶來講遷移上須要注意的應該就是這些點：

• 在命令行界面運行打包指令須要安裝 webpack-cli ；
• 打包須要指定打包模式 production or development ，在不一樣模式下會添加不一樣的默認配置， webpack.DefinePlugin 插件的 process.env.NODE_ENV 的值不須要再定義，將根據模式自動添加；
• 再也不須要在 plugin 中設置 new webpack.optimize.UglifyJsPlugin ，只須要在配置中設置開關便可，而且 production 模式自動開啓，能夠經過 optimization.minimizer 指定其餘壓縮庫；
• 刪除了 CommonsChunkPlugin ，功能已遷移至 optimization.splitChunks ， optimization.runtimeChunk。

遷移

1. 安裝最新的 webpack 、 webpack-cli 、 webpack-dev-server ；
2. 爲開發中和發佈分別配置 mode ，刪除 webpack.DefinePlugin 配置，而且去掉 package.json 中啓動腳本的 NODE_ENV 區別環境變量定義；
3. 去掉 new webpack.optimize.UglifyJsPlugin 、 ModuleConcatenationPlugin 配置。

爬坑

1. 在這些配置好以後我遇到的第一個問題就是打包時 extract-text-webpack-plugin 插件炸了！這裏提供了這裏有兩種解決方案：

   • 方法一：安裝指定 extract-text-webpack-plugin 版本 @next ；

   • 方法二：使用 mini-css-extract-plugin 替代。

     若是使用方法二注意在發佈打包時須要指定 css 壓縮庫配置，而且須要同時寫入 js 壓縮庫，由於你一旦指定了 optimization.minimizer 就會棄用內置的代碼壓縮：

     /* webpack.config.js */
     const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     
     module.exports = () => {
       const config = {
         module: {
           rules: [
             {
               test: /\.css$/,
               use: [
                 MiniCssExtractPlugin.loader,
                 'css-loader?importLoaders=1',
                 'postcss-loader'
               ]
             },
             {
               test: /\.less$/,
               use: [
                 MiniCssExtractPlugin.loader,
                 'css-loader?importLoaders=1',
                 'postcss-loader',
                 'less-loader'
               ]
             }
           ]
         },
         resolve: {
           extensions: ['.js', '.jsx', '.less']
         }
       };
       
       if (process.env.NODE_ENV === 'development') {
         config.module.rules[0].use = [
           'css-hot-loader',
           MiniCssExtractPlugin.loader,
           'css-loader?importLoaders=1',
           'postcss-loader'
         ];
         config.module.rules[1].use = [
           'css-hot-loader',
           MiniCssExtractPlugin.loader,
           'css-loader?importLoaders=1',
           'postcss-loader',
           {
             loader: 'less-loader',
             options: {
               modifyVars: theme
             }
           }
         ];
       }
     
       return config;
     };
     
     /* webpack.config.prod.js */
     const merge = require('webpack-merge');
     const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
     const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
     const webpackBaseConfig = require('./webpack.config')();
     
     module.exports = merge(webpackBaseConfig, {
       mode: 'production',
       optimization: {
         minimizer: [
           new UglifyJsPlugin({
             cache: true,
             parallel: true,
             uglifyOptions: {
               compress: {
                 warnings: false,
                 drop_debugger: true,
                 drop_console: false
               }
             }
           }),
           new OptimizeCSSAssetsPlugin({})
         ]
       },
       plugins: [
         new MiniCssExtractPlugin({
           filename: 'css/[name].css'
         })
       ]
     });

2. happypack 炸了，小場面，升級就好 @5.0.0-beta.3（happypack 和 extract-text-webpack-plugin 搭配使用更佳，mini-css-extract-plugin 未測試）。
3. webpack-browser-plugin 炸了，小場面，棄用就好，而後在 devServer 中配置 open 和 openPage 。

4. 上面的配置中能夠看到我使用判斷語句 process.env.NODE_ENV === 'development' 在開發配置中加入了 css-hot-loader ，可是這裏其實是獲取到的是 undefined ，咦？這是什麼鬼？查閱更新日誌是怎麼說的：

   process.env.NODE_ENV are set to production or development (only in built code, not in config)

   意思就是說咱們在使用的工程項目代碼中會獲取到這個變量，可是打包配置中使用這個變量仍是獲取不到的，我也實際驗證了這個結果，so，我在 package.json 的開發啓動腳本中仍是加上了 NODE_ENV='development' 。

最後

整體來講如今的升級時機已經成熟，大多須要用到的功能和插件都有平滑的升級或替代方案，建議在開始升級前安裝最新發布的插件版本，也能夠參考下個人項目配置react-with-mobx-template。

還有對插件的一些 API 也作了一些更改，若是你是插件開發者也能夠嘗試發佈新的插件版本，我在使用本身的版本號提取插件webpack-version-plugin時發現 compiler.plugin 已經被提示過氣了， webpack@v4 使用最新的 compiler.hooks.emit.tap 觸發事件，嗯，最後的這部分廣告真硬！

該文章首發於個人我的站點