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

Question

我在我的 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。

Answer 1

来自webpack docs：

webpackChunkName: A name for the new chunk. Since webpack 2.6.0, the placeholders [index] and [request] are supported within the given string to an incremented number or the actual resolved filename respectively.

您可以使用 [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

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

How to generate dynamic import chunk name in Webpack

webpack

webpack-4