在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?
2条答案
按热度按时间yvt65v4c1#
我不太明白你说的-
runtimeChunkName包含预编译的块文件路径
runtimeChunk
的v5和v4的文档是相同的,唯一的效果是将提供的路径附加到为优化生成的运行时模块,如文档中所述。所以通过提供一个像../${beforeRenderPath}
这样的值,你试图做的是加载模块,每个运行时模块一个目录?从口供上看-
webpack-4中的
runtimeChunkName
指向一个特定的文件:BeforeRenderActivity作为依赖项或预先检查。但是wepack 5说,现在需要使用dependOn和import语法。我认为我上面的推测是正确的,正如你在回应我对这篇文章的评论时提到的,你所期望的是为每个运行时模块加载一组特定的模块,而不是仅仅全局包含其中一个共享模块并在任何地方使用。
应该在运行时为所有入口点加载共享入口点,这就是要求。
要在Webpack 5中做到这一点,以下是您需要做的-
然后,确保在所有位置导入共享模块,如下所示-
让我知道我是否误解了什么或错过了什么。
注意:webpack不赞成这种做法。阅读本文以获取更多信息,并检查this以了解确切的原因。我猜你的用例是在加载任何东西之前做一些家务,比如身份验证,检查活动计划等。
gk7wooem2#
在Webpack 5中,runtimeChunk的行为已经改变,现在它使用输出配置的文件名模式。要实现与在Webpack 4中使用runtimeChunkName所做的类似的行为,可以使用dependOn选项沿着导入语法来拆分块。
以下是更新配置的方法:
对于多个插件条目,确保每个条目使用导入语法指定其所需的依赖项。Webpack将自动处理分块和依赖项。你的插件条目应该看起来像这样:
请确保您使用插件导入的相对路径,Webpack将根据依赖项创建必要的块。