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 配置。

爬坑

在這些配置好之后我遇到的第一個問題就是打包時 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'
  })
 ]
});

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

上面的配置中可以看到我使用判斷語句 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 觸發事件，嗯，最后的這部分廣告真硬！