Webpack4升级-踩坑指南

webpack4版本出来也挺久了，目前最新的版本是4.29.6（截至2019-04-08），但是公司的几个项目在现有版本运行得不错的情况下，也不敢乱动，毕竟从2升级到4还是有很多坑在的，出了幺蛾子还得背锅。但是传说webpack4的打包性能很高，当下我们的很多项目在处于webpack2，平均项目的打包时间在1分钟以上！整合了webpack-parallel-uglify-plugin、happypack等插件后，打包时间才缩小至33秒左右，最近我也是硬着头皮给升级了，目前来看运行良好，打包时间在28秒左右，性能也还不错，所以腾出一些时间做一些总结。

升级前

在升级之前，看下我电脑上的打包时间（下图所示一共约32.7秒）：

image.png

为保证严谨性，我一共打了10次包，平均耗时约33秒。接下来开始升级webpack至4.29.6。

Node.js版本要求

如果你的Node.js版本还在4以下，则无法支持webpack4，请将你的Node.js升级至6.11.5以上，推荐使用v8.5.0以上稳定版本。本人Node.js版本：8.10.0。

安装指定版本的webpack，并且必需安装webpack-cli

npm i webpack@4.29.6 webpack-cli -D

执行打包操作，如果你看到类似以下这么一堆报错：

uglifyJsError.png

commonsChunkError.png

这是由于webpack4已经不再支持webpack.optimize.UglifyJsPlugin、webpack.optimize.CommonsChunkPlugin等插件了。

webpack4的破坏性变更

失效的插件或loader	类型	功能说明
webpack.optimize.CommonsChunkPlugin	内置插件	分离Chunk，将多次出现的代码统一打包到一个文件中。
webpack.optimize.UglifyJsPlugin	内置插件	压缩JS。
extract-text-webpack-plugin	Loader	分离文件，主要用来分离CSS到指定文件。

很开心地告诉你，这些插件现在都不能用了，不过webpack4有更好的替代方案：

1. webpack.optimize.UglifyJsPlugin的替代方案
现在可以通过 "mode" 配置选项轻松切换到压缩输出，只需设置为 "production"，也可以在命令行接口中使用 --optimize-minimize 标记，来使用 UglifyJSPlugin：

mode: 'production'

optimization: {
  minimize: true
}

--optimize-minimize 标记会在 webpack 内部调用 UglifyJsPlugin，并且默认使用缓存和多个子进程平行打包

"mode"配置也可以在cli中作为参数传进来：

webpack --mode = production

下表简单介绍mode选项功能：

选项	描述
development	会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production	会将 process.env.NODE_ENV 的值设为 production。启用 UglifyJsPlugin, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin.

可以看到，在webpack4后，也不需要使用DefinePlugin指定process.env.NODE_ENV了。

2. webpack.optimize.CommonsChunkPlugin替代方案
之前需要通过配置两次new webpack.optimize.CommonsChunkPlugin来分别获取vendor和manifest的通用chunk方式已经做了整合，webpack4后，直接在optimization中配置runtimeChunk和splitChunks即可，提取功能也更为强大，具体配置见：splitChunks，如下配置可将node-modules中的第三方插件打包进vendor.js中：

optimization: {
  minimize: true,
  splitChunks: {
    cacheGroups: {
      vendors: {
        name: 'vendor',
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      }
    }
  }
}

3. extract-text-webpack-plugin替代方案
由于webpack4以后对css模块支持的逐步完善和commonchunk插件的移除，在处理css文件提取的计算方式上也做了些调整，之前我们首选使用的extract-text-webpack-plugin也完成了其历史使命，将让位于mini-css-extract-plugin，下面是mini-css-extract-plugin的简单用法：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {}
          },
          "css-loader"
        ]
      }
    ]
  }
}

webpack4环境及依赖库更新

上述升级时去掉了CommonsChunkPlugin和UglifyJsPlugin，此时再进行打包操作依然会出现一堆的报错问题，比如：

image.png

这些是由于webpack升级至4版本后，很多插件的版本不兼容导致的，需要升级以下这些插件，包括但不限于：

babel-core、babel-eslint等babel周边插件
eslint、eslint-loader等eslint周边插件
html-webpack-plugin
file-loader、css-loader
vue-loader、vue-style-loader、vue-template-compiler
less、less-loader等css预编译插件

若在执行打包过程中针对某个插件报错，如果没有很清晰的原因，请检查插件版本是否适用

注意：vue项目，如果安装的vue-loader版本在15+以上，要求使用VueLoaderPlugin，否则会报一大堆错误。

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  plugins: [
    new VueLoaderPlugin()
  ]
};

dynamic import

特别注意：webpack版本4.29.x有一个bug，无法使用dynamic import，这是个天坑！！！！搞了我好久！！！如果要使用dynamic import，请使用4.29.0之前的版本（比如4.28.x）.
github的issue地址：https://github.com/webpack/webpack/issues/8656

其他可能出现的问题

vue-template-compiler与vue版本不匹配
es6动态导入import()，需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

升级完成，进行测试

执行打包操作，我在打包开始和打包结束时加入了时间计算：

image.png

执行10次打包操作，计算平均耗时，大约为29s

image.png

性能提高虽说不多，但是去掉了happypack、webpack-parallel-uglify-plugin等第三方插件。

可使用webpack-bundle-analyzer插件进行打包分析，如下：

image.png

PS. 如果本文有错误之处，还请指出，webpack配置过程中有其他问题，可以加我微信一起讨论：liu547786364