我在TypeScript代码中动态调用import语句,基于该Webpack会创建如下块:
你可以看到的WebPack是自动生成的文件名1
,2
,3
分别名字是不是一个好记的名称。
我尝试了一种通过注释提供块名称的方法,但是它正在生成 modulename1.bundle.js , modulename2.bundle.js
bootStrapApps(config) {
config.apps.forEach(element => {
registerApplication(
// Name of our single-spa application
element.name,
// Our loading function
() =>
import(/* webpackChunkName: "modulename"*/ "../../" +
config.rootfolder +
"/" +
element.name +
"/" +
"app.bootstrap.js"),
// Our activity function
() => true
);
});
start();
}
有什么办法可以通过此注释动态指定模块名称?我不知道这是特定于TypeScript或Webpack的。
webpackChunkName:新块的名称。从webpack 2.6.0开始,占位符[index]和[request]在给定字符串中分别支持递增的数字或实际的解析文件名。
您可以使用[request]
占位符来设置动态块名称。
一个基本的例子是:
const cat = "Cat";
import(
/* webpackChunkName: "[request]" */
`./animals/${cat}`
);
因此,块名称将为cat
。但是,如果将字符串Cat
放在路径中,[request]
则会在构建提示期间引发警告request was undefined
。
因此,这将不起作用:
import(
/* webpackChunkName: "[request]" */
"./animals/Cat"
);
最后,您的代码将如下所示:
bootStrapApps(config) {
config.apps.forEach((element) => {
registerApplication(
// Name of our single-spa application
element.name,
// Our loading function
() =>
import(/* webpackChunkName: "[request]" */ `../../${config.rootfolder}/${
element.name
}/app.bootstrap.js`),
// Our activity function
() => true
);
});
start();
}
查看此GitHub问题以获取更多帮助。https://github.com/webpack/webpack/issues/4807
PS:这些评论称为webpack魔术评论。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句