Webpack 4 升级指南

推荐工具

• npm check — 检查依赖更新
• npm outdated — 查看过时依赖

关键改动

1. 新增 mode 配置

通过 mode 参数设置为 development、production 或 none，启用对应环境下的内置优化。默认值为 production。

2. CommonsChunkPlugin → splitChunks

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

3. 优化 chunk 打包 hash

optimization: {
  runtimeChunk: 'single',
},
plugins: [
  new webpack.HashedModuleIdsPlugin(),
]

4. extract-text-webpack-plugin → mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? "[name].css" : "[name].[contenthash].css",
      chunkFilename: devMode ? "[id].css" : "[id].[contenthash].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
};

注意：不能同时使用 style-loader 和 MiniCssExtractPlugin.loader。