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

Question

我在TypeScript代码中动态调用了一个导入语句，基于这一点，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的。

Answer 1

来自webpack docs

webpackChunkName:新块的名称。从webpack 2.6.0开始，支持在给定的字符串内将占位符索引和请求分别增加到递增的数字或实际解析的文件名。

您可以使用[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，魔法评论，。

Answer 2

您也可以在webpack配置文件中使用chunkFilename。

它在babel-plugin-syntax-dynamic-import中可用。

在我看来，配置文件中的chunkFilename有时比每个文件中的webpackChunkName更方便

请在https://medium.com/@anuhosad/code-splitting-in-webpack-with-dynamic-imports-4385b3760ef8中查看详细信息