能否为Webpack magic comment传入指定变量用作动态导入的bundle命名

Webpack 魔法注释中的 [request] 占位符默认会取动态导入路径中所有动态部分的完整拼接结果，所以当你用两个变量拼接路径时，会把两个变量的内容都带入chunk名，导致文件名过长，可根据你的实际场景选择对应解决方案：

场景1：pathName取值可枚举 #

如果你的pathName参数只有有限个固定取值（比如只能是components/views/utils这类固定目录），可以直接把路径前缀硬编码拆分，此时[request]就只会取request参数的值：

const dynamicImport = (pathName, request, resolve, canTryAgain) => {
  let importPromise
  if (pathName === '@/components') {
    importPromise = import(/* webpackChunkName: 'comp-[request]' */ `@/components/${request}`)
  } else if (pathName === '@/views') {
    importPromise = import(/* webpackChunkName: 'view-[request]' */ `@/views/${request}`)
  }
  importPromise
    .then(component => resolve(component.default))
    .catch(() => {
      if (canTryAgain) {
        dynamicImport(pathName, request, resolve, false);
      } else {
        location.reload();
      }
    });
};

场景2：pathName完全动态无法枚举 #

可以通过给导入路径加自定义query参数，配合Webpack配置自定义chunk命名规则实现：

第一步：修改动态导入逻辑，携带自定义chunk名 #

const dynamicImport = (pathName, request, resolve, canTryAgain) => {
    import(
      /* webpackInclude: /\.vue$/ */ // 可选配置，仅打包vue文件，减少不必要的打包资源
      `${pathName}/${request}?__customChunk=${request}`
    )
        .then(component => resolve(component.default))
        .catch(() => {
            if (canTryAgain) {
                dynamicImport(pathName, request, resolve, false);
            } else {
                location.reload();
            }
        });
};

第二步：修改Webpack配置，自定义chunk命名规则 #

在webpack.config.js的output.chunkFilename中增加自定义处理逻辑：

module.exports = {
  // 其余配置保持不变
  output: {
    // 其余output配置保持不变
    chunkFilename: (pathData) => {
      // 提取路径中携带的自定义chunk名
      const customName = pathData.module?.rawRequest?.match(/__customChunk=([^&]+)/)?.[1]
      if (customName) {
        // 可按需调整命名规则，加上contenthash避免静态资源缓存问题
        return `${customName}.[contenthash:8].js`
      }
      // 非自定义chunk走默认命名规则
      return '[name].[contenthash:8].js'
    }
  }
}

内容的提问来源于stack exchange，提问作者Tom Österlund