深入探索 webpack 5 中的潜在陷阱

webpack 5 项目中的坑（持续更新）

大家可能都有所了解，webpack 5 相较于 webpack 4 升级了许多新特性，但随之而来的也有许多坑，本文将分享我在使用 webpack 5 过程中踩过的坑。

1. entry 配置路径问题

webpack 4 中，可以使用路径别名来简化 entry 配置，例如：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
},

然后在 entry 中使用别名：

entry: {
  app: '@/main.js',
},

而在 webpack 5 中，这种方式不再起作用，需要使用 resolve.aliasFields 配置项：

resolve: {
  aliasFields: ['alias'],
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
},

2. TerserPlugin 配置问题

webpack 4 中，使用 TerserPlugin 进行代码压缩时，可以通过 parallel 选项开启多线程压缩：

optimization: {
  minimizer: [
    new TerserPlugin({
      parallel: true,
    }),
  ],
},

而在 webpack 5 中，parallel 选项已不再支持，需要使用 terserOptions.parallel 选项：

optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        parallel: true,
      },
    }),
  ],
},

3. 代码分割问题

webpack 4 中，可以通过 optimization.splitChunks 配置项进行代码分割：

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

而在 webpack 5 中，optimization.splitChunks 配置项已拆分为 optimization.splitChunks 和 optimization.runtimeChunk 配置项：

optimization: {
  splitChunks: {
    chunks: 'all',
  },
  runtimeChunk: {
    name: 'runtime',
  },
},

4. externals 配置问题

webpack 4 中，可以通过 externals 配置项排除外部依赖：

externals: {
  jquery: 'jQuery',
},

而在 webpack 5 中，externals 配置项已拆分为 externals 和 externalsType 配置项：

externals: {
  jquery: 'jQuery',
},
externalsType: 'var',

以上便是我在使用 webpack 5 过程中踩过的几个坑，希望能够帮助大家避免类似的问题。webpack 5 的功能非常强大，但同时也带来了许多新的变化，在使用时需要多加注意。