webpack 4升级踩坑指南

[Jenna-u]

这段时间升级了公司前端项目的webpack，版本升级到4.12.1。下面来介绍下此次升级踩坑遇到的问题：

webpack 4 特点

1.添加mode配置，development 和production两个选项，--mode production会自动压缩代码
2.去除了CommonsChunkPlugin，改成使用optimization.splitChunks进行模块划分
3.webpack-cli用来启用webpack

升级

看了下项目目前的webpack配置，感觉需要改动的地方还较小

1. 更新webpack版本

yarn add -D webpack & webpack-cli

在做这步操作时，建议先查看一下node版本，一些插件对node版本有要求，建议升级node版本(node@>=6.11.5)

2. 在原有webpack配置的基础上，改变了css和sass的配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  module: {
    rules: [
		{
      test: /\.css$/,
      exclude: [path.resolve(__dirname, 'node_modules/')],
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[folder][name]__[local]—[hash:base64:5]',
          }
        }
      ]
    },
    {
      test: /\.css$/,
      exclude: [path.resolve(__dirname, 'src/')],
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader'
      ]
    },
    {
      test: /\.(scss|sass)$/,
      exclude: path.resolve(__dirname, 'node_modules'),
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'build/css/[name].[contenthash].css',
    }),
  ]
}

原有的extract-text-webpack-plugin插件在升级webpack 4.2.x的版本后不再支持，mini-css-extract-plugin来解决css提取的问题。
这也是此次升级的最大改变，本身前端项目就存在css类名重复，后面的样式覆盖前面的样式的问题，所以就启用了css-module来解决这个问题。

3. 最后就是相应的loader升级，根据编译错误结果，教育云项目升级了以下loader和包

"awesome-typescript-loader": "^5.2.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"typescript": "^2.9.2",
"url-loader": "^1.0.1",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-dev-server": "^3.1.4",
"@nenado/interpolate-html-plugin": "^1.0.1",

我们在项目中使用了InterpolateHtmlPlugin，主要功能就是往index.html文件里插值。例如一些cdn地址，需要把这个配置放在 new HtmlWebpackPlugin({...})之后执行。根据Google搜索结果，因为html-webpack-plugin这个作者没有及时更新webpack4之后的版本，所以webpack就将该项目fork了出来单独做了处理,必须要等index.html文件生成之后才能插值，不然就会报错。

config.plugins.push(new InterpolateHtmlPlugin({
  PUBLIC_URL: publicUrl,
  STATIC_URL: configWeb.cdnStatic,
  VERSION: +new Date(),
  REACT_APP_ICON_URL,
}));

总结：

这次升级给我带来不是项目打包上的便捷和快速，更多的是提升了我从每次编译报错定位问题，以及解决问题的能力。