Webpack 5中配置带预编译文件路径的runtimeChunk及替代方案

问题背景 #

在Webpack 4 + Node.js 14环境中，我们通过配置runtimeChunkName指向预编译chunk的文件路径，实现将BeforeRenderActivity-dyn作为所有插件入口的依赖预检查。但升级到Webpack 5后该配置完全失效，原配置如下：

const beforeRenderPath = `before-render/js/dist/BeforeRenderActivity-dyn`;
const runtimeChunkName =
env === 'development'
? `../${beforeRenderPath}`
: `./plugins/${beforeRenderPath}`;

optimization: {
  splitChunks: {
    cacheGroups: {
      antd: {
        name: 'antd',
        test: (module) => {
          return (
            /antd|rc-/.test(module.context) ||
            /ant-design[\\/]icons/.test(module.context)
          );
        },
        chunks: 'all',
        priority: 2,
        enforce: true
      },
      ... some_more_vendors,
  runtimeChunk: {
    name: runtimeChunkName
  }
}

当前页面报错：

Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

项目入口通过plugin.json哈希映射定义：

{
  "../../conf/login/js/dist/LoginView": "./plugins_on_premise/login/js/LoginView.tsx",
  "../auth-provider/js/dist/AuthProvider": "./plugins_on_premise/auth-provider/js/AuthProvider.ts",
  "../auth-provider/js/dist/RenewTokenActivity-dyn": "./plugins_on_premise/auth-provider/js/RenewTokenActivity-dyn.tsx",
  "../_context-switch/js/dist/ContextSwitchActivity-dyn": "./plugins_on_premise/_context-switch/js/ContextSwitchActivity-dyn.tsx",
  "../change-password/js/dist/ChangePasswordActivity-dyn": "./plugins_on_premise/change-password/js/ChangePasswordActivity-dyn.tsx",
  "../before-render/js/dist/BeforeRenderActivity-dyn": "./plugins/before-render/js/BeforeRenderActivity-dyn.tsx"
}

使用的依赖版本：

• webpack: "5.88.2"
• webpack-bundle-analyzer: "4.9.0"
• webpack-chunk-rename-plugin: "1.0.3"
• webpack-cli: "5.1.4"
• webpack-dev-middleware: "6.1.1"
• webpack-dev-server: "4.15.1"
• webpack-hot-middleware: "2.25.4"

Webpack 5不再支持原Webpack 4的runtimeChunk.name指向预编译chunk路径的写法，要求改用dependOn与ES模块import语法。需要明确以下问题：

1. 多插件入口的正确配置语法
2. 原runtimeChunkName需要保留、删除还是修改以延续原优化效果
3. 修复多插件入口依赖单个预编译入口问题的可行示例与步骤

解决方案 #

1. 多插件入口的正确语法 #

Webpack 5中，多入口需要明确声明依赖关系，不能再通过runtimeChunk直接指向其他入口。首先将BeforeRenderActivity-dyn作为独立入口，再让其他所有入口通过dependOn依赖它：

// 读取plugin.json后的入口对象处理
const entries = require('./plugin.json');
// 拆分出BeforeRender入口
const beforeRenderEntryKey = "../before-render/js/dist/BeforeRenderActivity-dyn";
const beforeRenderEntry = {
  [beforeRenderEntryKey]: entries[beforeRenderEntryKey]
};
// 处理其他入口，添加dependOn关联预编译入口
const otherEntries = Object.fromEntries(
  Object.entries(entries).filter(([key]) => key !== beforeRenderEntryKey)
    .map(([key, value]) => [
      key,
      {
        import: value,
        dependOn: beforeRenderEntryKey
      }
    ])
);
// 合并最终入口
module.exports = {
  entry: {
    ...beforeRenderEntry,
    ...otherEntries
  },
  // ...其他Webpack配置
};

2. runtimeChunkName的处理 #

原runtimeChunkName的作用是将runtime代码绑定到预编译chunk中，Webpack 5中建议删除原runtimeChunk.name配置，改用Webpack 5的标准runtimeChunk策略：

• 如果希望生成单个runtime文件，配置runtimeChunk: 'single'
• 如果需要按入口拆分runtime，配置runtimeChunk: { name: (entrypoint) => runtime~${entrypoint.name} }

这种方式既能延续原优化效果（runtime与业务chunk关联），又符合Webpack 5的规范。

3. 修复多入口依赖预编译入口的完整步骤 #

步骤1：调整入口配置，添加dependOn依赖

按照上述代码修改入口配置，确保所有插件入口都依赖BeforeRenderActivity-dyn。

步骤2：更新optimization配置

移除原runtimeChunk.name配置，替换为标准runtimeChunk配置：

optimization: {
  splitChunks: {
    // 保留原cacheGroups配置
    cacheGroups: {
      antd: {
        name: 'antd',
        test: (module) => {
          return (
            /antd|rc-/.test(module.context) ||
            /ant-design[\\/]icons/.test(module.context)
          );
        },
        chunks: 'all',
        priority: 2,
        enforce: true
      },
      ...some_more_vendors
    }
  },
  runtimeChunk: 'single' // 生成单个runtime文件，按需调整
}

步骤3：确保预编译入口的执行顺序

在BeforeRenderActivity-dyn.tsx中保留原有的依赖预检查逻辑，若需要强制加载顺序，可在HTML中手动先引入BeforeRenderActivity-dyn的bundle，再引入其他插件bundle。

步骤4：解决MIME类型报错

该报错是因为Webpack请求的路径返回了HTML（通常是404页面），需：

• 检查输出目录与devServer.static配置匹配，确保能正确访问生成的bundle：

devServer: {
  static: {
    directory: path.join(__dirname, 'dist'), // 对应你的输出目录
    publicPath: '/' // 匹配生成bundle的publicPath
  }
}

• 确认生成的chunk文件名与路径和预期一致，避免路径错误。

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