如何在Webpack中生成动态导入块名称

编码EZ

我在TypeScript代码中动态调用import语句,基于该Webpack会创建如下块:

在此处输入图片说明

你可以看到的WebPack是自动生成的文件名123分别名字是不是一个好记的名称。

我尝试了一种通过注释提供块名称的方法,但是它正在生成 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的。

Murli prajapati

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章