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

hs1ihplo  于 2023-10-19  发布在  Webpack
关注(0)|答案(2)|浏览(139)

在webpack版本4和node 14的早期版本中,runtimeChunkName使用预编译的块文件路径,但现在这在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
  }

如何在webpack 5中使用filepath引用来提供runtimeChunk名称?

**收到的错误是:**拒绝执行脚本,因为其MIME类型('text/html')不可执行,并且启用了严格的MIME类型检查
入口点看起来像这样:

这是从plugin.json提供的,它是哈希Map。

{
  "../../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-4中的runtimeChunkName指向一个特定的文件:BeforeRenderActivity作为依赖项或预先检查。但wepack 5说,现在需要使用dependOn与导入语法。
因此,条目的正确语法应该是什么,现在应该保留或删除或修改runTimeChunkname,以获得webpack 4带来的优化好处。
请求一个工作示例或步骤来解决这个问题。
如何解决这个问题与多个插件条目,需要一个预编译的条目在webpack 5?

yvt65v4c

yvt65v4c1#

我不太明白你说的-
runtimeChunkName包含预编译的块文件路径
runtimeChunk的v5和v4的文档是相同的,唯一的效果是将提供的路径附加到为优化生成的运行时模块,如文档中所述。所以通过提供一个像../${beforeRenderPath}这样的值,你试图做的是加载模块,每个运行时模块一个目录?
从口供上看-
webpack-4中的runtimeChunkName指向一个特定的文件:BeforeRenderActivity作为依赖项或预先检查。但是wepack 5说,现在需要使用dependOn和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不赞成这种做法。阅读本文以获取更多信息,并检查this以了解确切的原因。我猜你的用例是在加载任何东西之前做一些家务,比如身份验证,检查活动计划等。

gk7wooem

gk7wooem2#

在Webpack 5中,runtimeChunk的行为已经改变,现在它使用输出配置的文件名模式。要实现与在Webpack 4中使用runtimeChunkName所做的类似的行为,可以使用dependOn选项沿着导入语法来拆分块。
以下是更新配置的方法:

const beforeRenderPath = './plugins/beforerender/js/dist/BeforeRenderActivity-dyn';

    module.exports = {
        optimization: {
            splitChunks: {
                cacheGroups: {
                    antd: {
                       // cacheGroups...
                    },
                    runtimeChunk: {
                        name: (entryPoint) => `runtime~${entryPoint.name}`,
                    },
                },
             },
         },
         output: {
    // ...other output options...
    filename: (pathData) => {
      if (pathData.chunk.name === 'runtime~main') {
        return 'main.js';
      }
      return '[name].[contenthash].js';
    },
  },
};

对于多个插件条目,确保每个条目使用导入语法指定其所需的依赖项。Webpack将自动处理分块和依赖项。你的插件条目应该看起来像这样:

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

请确保您使用插件导入的相对路径,Webpack将根据依赖项创建必要的块。

相关问题