Webpack 5 供应商块命名答案

【问题标题】：Webpack 5 vendors chunks namingWebpack 5 供应商块命名
【发布时间】：2021-04-07 13:03:58
【问题描述】：

在 webpack 4 中，供应商块具有诸如 vendors~main~secondary.js 之类的名称，它们指的是与它们相关的块。现在，在 webpack 5 中，供应商块的名称是这样的：vendors-node_modules_react-dom_index_js.js，这真的不太可读和可理解。

关于如何在使用 webpack 5 时返回到 webpack 4 的行为的任何提示？

我想我必须对 splitChunks.name 做点什么，但我找不到合适的函数来做这件事。

编辑

虽然@MrP01 的回答更彻底，并且更深入地了解了使用splitChunks.name，但这是我最终使用的一个简短的sn-p，它让我可以回到确切的旧行为。

optimization: {
  splitChunks: {
    chunks: 'all',
    name: (module, chunks, cacheGroupKey) => {
      const allChunksNames = chunks.map((chunk) => chunk.name).join('~');
      const prefix = cacheGroupKey === 'defaultVendors' ? 'vendors' : cacheGroupKey;
      return `${prefix}~${allChunksNames}`;
    },
  },
},

【问题讨论】：

标签： webpack webpack-splitchunks

【解决方案1】：

我对 webpack 5 中的新命名方案的感觉非常相似。经过相当多的努力和测试，我通过将函数句柄传递给 filename 属性得出了以下结论。

为了获得“更漂亮”的名字——这当然取决于每个人的个人判断——下面的函数对名字进行规范化并去掉它们中大的和不必要的部分。

function normalizeName(name) {
  return name.replace(/node_modules/g, "nodemodules").replace(/[\-_.|]+/g, " ")
    .replace(/\b(vendors|nodemodules|js|modules|es)\b/g, "")
    .trim().replace(/ +/g, "-");
}

主要问题是拆分出来的块的命名。当前文档对此不是很明确，但是config.optimization.splitChunks 中配置的cacheGroup 设置，没有特定的cacheGroup，适用于所有cacheGroup。

我还启用了块、资产名称和提取的 css 的规范化。

module.exports = async () => {
  return {
    config: {
      context: BASE,
      entry: entrypoints,
      output: {
        path: path.resolve(`./.dev/bundles/${locale}`),
        publicPath: `/static/bundles/${locale}/`,
        filename: (pathData) => {
          return normalizeName(pathData.chunk.name) + ".js";
        },
        chunkFilename: (pathData) => {
          return normalizeName(pathData.chunk.id) + ".js";
        },
      },
      devtool: false,
      optimization: {
        splitChunks: {
          chunks: "all",
          name(module, chunks, cacheGroupKey) {
            const moduleFileName = module.identifier().split("/").reduceRight((item) => item);
            // const allChunksNames = chunks.map((item) => item.name).join("-");
            return normalizeName(moduleFileName.replace(/[\/]/g, "-"));
          }
        }
      },
    },
    module: {
      rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          cssLoader,
          postCssLoader
        ]
      },
      {
        test: /\.(ttf|woff|eot|png|jpg|jpeg|svg)$/,
        type: "javascript/auto",
        loader: "file-loader",
        options: {
          name: (resourcePath, resourceQuery) => {
            let ext = path.extname(resourcePath);  // for instance ".jpg"
            return normalizeName(path.basename(resourcePath).slice(0, -ext.length)) + ext;
          }
        }
      }]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: (pathData) => normalizeName(pathData.chunk.name) + ".css",
        chunkFilename: (pathData) => normalizeName(pathData.chunk.id) + ".css"
      }),
    ],
  };
};

这导致文件名超出名称限制，在生成的输出文件夹中文件名更短、更简洁。

【讨论】：