如何在Webpack中正确设置动态导入生成的Chunk Group名称？

方法1：自定义插件同步Chunk与ChunkGroup名称 #

你可以写一个简单的Webpack插件，监听ChunkGroup的创建事件，把你已经设置好的Chunk名称同步给对应的ChunkGroup，同时更新compilation.namedChunkGroups的映射：

class NamedDynamicChunkGroupsPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('NamedDynamicChunkGroupsPlugin', (compilation) => {
      // 监听ChunkGroup添加的钩子
      compilation.hooks.addChunkGroup.tap('NamedDynamicChunkGroupsPlugin', (chunkGroup) => {
        // 只处理动态导入生成的异步ChunkGroup
        if (chunkGroup instanceof compilation.compiler.webpack.compilation.AsyncChunkGroup) {
          // 取出关联的chunk（动态导入的chunk通常只有一个）
          const chunk = chunkGroup.chunks.values().next().value;
          if (chunk?.name) {
            // 设置ChunkGroup名称并加入命名集合
            chunkGroup.name = chunk.name;
            compilation.namedChunkGroups.set(chunk.name, chunkGroup);
          }
        }
      });
    });
  }
}

// 在webpack配置中引入这个插件
module.exports = {
  output: {
    chunkFilename: pathData => {
      const chunkName = cleanFilename(pathData.chunk.id);
      pathData.chunk.name = chunkName;
      return `${chunkName}.chunk.js`;
    },
  },
  optimization: {
    chunkIds: 'named'
  },
  plugins: [
    new NamedDynamicChunkGroupsPlugin()
  ]
};

方法2：通过splitChunks直接命名（适合有路径规则的场景） #

如果你的动态导入模块集中在特定目录，可以用splitChunks的cacheGroups来匹配模块，直接生成带名称的Chunk和ChunkGroup，不用手动修改chunk.name：

const path = require('path');

module.exports = {
  output: {
    chunkFilename: '[name].chunk.js',
  },
  optimization: {
    chunkIds: 'named',
    splitChunks: {
      chunks: 'async',
      cacheGroups: {
        dynamicChunks: {
          // 匹配你的动态导入模块路径
          test: /src\/modules\/dynamic\//,
          // 根据模块相对路径生成可读名称
          name: (module) => {
            const relativePath = path.relative('./src', module.context);
            return cleanFilename(relativePath);
          },
          enforce: true,
        },
      },
    },
  },
};

这种配置下，Webpack会自动给匹配到的动态模块生成命名的ChunkGroup，直接出现在compilation.namedChunkGroups里。

注意事项 #

• 不要直接修改chunkGroup.options.name，Webpack内部是通过chunkGroup.name维护命名映射的，必须同时更新compilation.namedChunkGroups集合才能生效。
• 方法1适配所有动态导入场景，方法2更适合有明确目录划分的模块，按需选择即可。

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