如何在Webpack中生成动态导入块名称 [英] How to generate dynamic import chunk name in Webpack

问题描述

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

I am dynamically calling an import statement in my TypeScript code, based on that Webpack will create chunks like below:

可以看到Webpack自动生成的文件名分别为1、2、3，名称不是友好名称.

You can see Webpack is automatically generating the file name as 1, 2, 3 respectively, the name is not a friendly name.

我尝试了一种通过注释提供块名称的方法，但它生成了 modulename1.bundle.js , modulename2.bundle.js

I have tried a way to provide the chunk name through comment, but it's generating 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 的.

Is there any way to specify the module name dynamically though this comment? I don't know this is specific to TypeScript or Webpack.

推荐答案

来自 webpack 文档:

webpackChunkName:新块的名称.从 webpack 2.6.0 开始，给定字符串中的占位符 [index] 和 [request] 分别支持递增的数字或实际解析的文件名.

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] 占位符来设置动态块名称.
一个基本的例子是:

You can use [request] placeholder to set dynamic chunk name.
A basic example would be:

const cat = "Cat";
import(
  /* webpackChunkName: "[request]" */
  `./animals/${cat}`
);  

所以块名称将是 Cat.但是如果你把字符串 Cat 放在路径中，[request] 会在构建过程中抛出一个警告，说 request is undefined.
所以这行不通:

So the chunk name will be Cat. But if you put the string Cat in the path, [request] will throw a warning during the build saying request was undefined.
So this will not work:

import(
  /* webpackChunkName: "[request]" */
  "./animals/Cat"
);  

最后，您的代码将如下所示:

Finally, your code would look something like this:

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

Look at this GitHub issue for more help. https://github.com/webpack/webpack/issues/4807

PS:这些评论被称为webpack 魔术评论.

PS: Those comments are called webpack magic comments.

这篇关于如何在Webpack中生成动态导入块名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！