Webpack5单入口搭配splitChunks、MiniCssExtractPlugin拆分独立vendors.css

解决方案 #

1. 调整MiniCssExtractPlugin配置 #

首先要保证插件的输出文件名规则同时覆盖入口chunk和拆分出来的公共chunk，避免拆分出的样式文件使用默认的ID命名：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 其余配置省略
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].css',
    })
  ]
}

2. 修改splitChunks缓存组规则 #

默认splitChunks会受最小体积、最小引用数等阈值限制，且内置的默认缓存组可能和自定义规则冲突，调整配置如下即可强制拆分出你需要的4个产物：

module.exports = {
  // 其余配置省略
  optimization: {
    splitChunks: {
      // 关闭内置默认缓存组，避免生成多余产物
      default: false,
      defaultVendors: false,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 100,
          // 强制拆分，跳过minSize、minChunks等阈值限制
          enforce: true,
        },
        index: {
          // 替换为你项目业务代码对应的目录匹配规则
          test: path.resolve(conf.SRC_ROOT),
          name: 'index',
          chunks: 'all',
          priority: 10,
          enforce: true,
        }
      }
    }
  }
}

配置完成后重新构建，即可得到固定的index.js、index.css、vendors.js、vendors.css四个产物，完全匹配你需要的代码拆分规则。

内容的提问来源于stack exchange，提问作者szegheo