之前看到各大公眾號(hào)都在狂推 webpack 新版發(fā)布的相關(guān)內(nèi)容，之前就嘗試了升級(jí)，由于部分插件的原因，未能成功，現(xiàn)在想必過了這么久已經(jīng)可以了，今天就來試一下在我的項(xiàng)目中升級(jí)會(huì)遇到哪些坑。

創(chuàng)新互聯(lián)專注于大柴旦企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開發(fā)。大柴旦網(wǎng)站建設(shè)公司,為大柴旦等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

查閱更新日志

在安裝更新之前，先大致瀏覽了一下更新日志，對(duì)大部分用戶來說遷移上需要注意的應(yīng)該就是這些點(diǎn)：

• 在命令行界面運(yùn)行打包指令需要安裝 webpack-cli ；
• 打包需要指定打包模式 production or development ，在不同模式下會(huì)添加不同的默認(rèn)配置， webpack.DefinePlugin 插件的 process.env.NODE_ENV 的值不需要再定義，將根據(jù)模式自動(dòng)添加；
• 不再需要在 plugin 中設(shè)置 new webpack.optimize.UglifyJsPlugin ，只需要在配置中設(shè)置開關(guān)即可，并且 production 模式自動(dòng)開啟，可以通過 optimization.minimizer 指定其他壓縮庫(kù)；
• 刪除了 CommonsChunkPlugin ，功能已遷移至 optimization.splitChunks ， optimization.runtimeChunk。

遷移

1. 安裝最新的 webpack 、 webpack-cli 、 webpack-dev-server ；
2. 為開發(fā)中和發(fā)布分別配置 mode ，刪除 webpack.DefinePlugin 配置，并且去掉 package.json 中啟動(dòng)腳本的 NODE_ENV 區(qū)別環(huán)境變量定義；
3. 去掉 new webpack.optimize.UglifyJsPlugin 、 ModuleConcatenationPlugin 配置。

爬坑

在這些配置好之后我遇到的第一個(gè)問題就是打包時(shí) extract-text-webpack-plugin 插件炸了！這里提供了這里有兩種解決方案：

• 方法一：安裝指定 extract-text-webpack-plugin 版本 @next ；
• 方法二：使用 mini-css-extract-plugin 替代。

如果使用方法二注意在發(fā)布打包時(shí)需要指定 css 壓縮庫(kù)配置，并且需要同時(shí)寫入 js 壓縮庫(kù)，因?yàn)槟阋坏┲付?optimization.minimizer 就會(huì)棄用內(nèi)置的代碼壓縮：

/* 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 炸了，小場(chǎng)面，升級(jí)就好 @5.0.0-beta.3（happypack 和 extract-text-webpack-plugin 搭配使用更佳，mini-css-extract-plugin 未測(cè)試）。webpack-browser-plugin 炸了，小場(chǎng)面，棄用就好，然后在 devServer 中配置 open 和 openPage 。

上面的配置中可以看到我使用判斷語(yǔ)句 process.env.NODE_ENV === 'development' 在開發(fā)配置中加入了 css-hot-loader ，但是這里實(shí)際上是獲取到的是 undefined ，咦？這是什么鬼？查閱更新日志是怎么說的：

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

意思就是說我們?cè)谑褂玫墓こ添?xiàng)目代碼中會(huì)獲取到這個(gè)變量，但是打包配置中使用這個(gè)變量還是獲取不到的，我也實(shí)際驗(yàn)證了這個(gè)結(jié)果，so，我在 package.json 的開發(fā)啟動(dòng)腳本中還是加上了 NODE_ENV='development' 。

最后

總體來說現(xiàn)在的升級(jí)時(shí)機(jī)已經(jīng)成熟，大多需要用到的功能和插件都有平滑的升級(jí)或替代方案，建議在開始升級(jí)前安裝最新發(fā)布的插件版本，也可以參考下我的項(xiàng)目配置react-with-mobx-template。

還有對(duì)插件的一些 API 也做了一些更改，如果你是插件開發(fā)者也可以嘗試發(fā)布新的插件版本，我在使用自己的版本號(hào)提取插件webpack-version-plugin時(shí)發(fā)現(xiàn) compiler.plugin 已經(jīng)被提示過氣了， webpack@v4 使用最新的 compiler.hooks.emit.tap 觸發(fā)事件，嗯，最后的這部分廣告真硬！