如何在 webpack 5 或替代方案中使用预编译文件路径配置runtimeChunk

Question

早期在 webpack 版本 4 和 Node 14 版本中，runtimeChunkName 带有预编译的块文件路径，但现在这在 webpack 5 中不起作用。

const beforeRenderPath = before-render/js/dist/BeforeRenderActivity-dyn;

const runtimeChunkName = env === '开发' ? ../${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
  }

如何在 webpack 5 中借助文件路径引用来提供 runtimeChunk 名称？

收到的错误是：拒绝执行脚本，因为其 MIME 类型（'text/html'）不可执行，并且启用了严格的 MIME 类型检查

入口点如下所示：

这是由作为哈希映射的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"

runtimeChunkName在 webpack-4 中指向一个特定的文件：BeforeRenderActivity作为依赖项或之前的预检查。但 wepack 5 表示，现在需要使用dependOnimport 语法。

因此，条目的正确语法应该是什么，现在应该保留、删除或修改 runTimeChunkname，以获得 webpack 4 带来的优化优势。

请求一个工作示例或步骤来解决此问题。

如何解决 webpack 5 中多个插件条目需要一个预编译条目的问题？

Answer 1

我不太确定你说的是什么意思 -

runtimeChunkName 带有预编译的块文件路径

v5和v4的文档runtimeChunk是相同的，唯一的效果是将提供的路径附加到为优化而生成的运行时模块，如文档中所述。因此，通过提供一个像../${beforeRenderPath}您试图做的那样加载模块的值，为每个运行时模块提供一个目录？

从声明中——

runtimeChunkNamewebpack-4 中指向一个特定文件：BeforeRenderActivity 作为依赖项或之前的预检查。但 wepack 5 表示，现在需要将 dependentOn 与 import 语法一起使用。

我认为我上面的猜测是正确的，正如您在回复我对帖子的评论时提到的，您期望的是为每个运行时模块加载一组特定的模块，而不是仅在全局范围内包含其中一个共享模块并随处使用。

应该在运行时为所有入口点加载共享入口点，这就是要求。

要在 Webpack 5 中做到这一点，您需要执行以下操作 -

const env = process.env.NODE_ENV; // or whatever
let beforeRenderPaths = ["before-render/js/dist/BeforeRenderActivity-dyn", "auth-provider/js/dist/RenewTokenActivity-dyn"];

beforeRenderPaths = beforeRenderPaths.map(path => env === "development" ? `../${path}` : `./plugins/${beforeRenderPath}`);

module.exports = {
  //...
  entry: {
    a: { import: "./src/a.js", dependOn: "shared" },
    b: { import: "./src/b.js", dependOn: "shared" },
    c: { import: [ "./src/c.js", "./src/f.js"], dependOn: "shared"},
    'shared': beforeRenderPaths,
  },
  //...
  runtimeChunk: true
};

然后，确保在所有位置导入共享模块，如下所示 -

import 'before-render/js/dist/BeforeRenderActivity-dyn';
import 'auth-provider/js/dist/RenewTokenActivity-dyn';

如果我误解了某些内容或遗漏了某些内容，请告诉我。

注意：webpack 不赞成这种做法。阅读此内容以获取更多信息，并检查此内容以了解确切原因。我猜你的用例是在加载任何内容之前做一些内务工作，比如身份验证、检查活动计划等。