Как создать динамическое имя чанка импорта в веб-пакете

Я динамически вызываю оператор import в своем коде машинописи, основываясь на том, что веб-пакет создаст куски, как показано ниже:

enter image description here

Вы можете видеть, что 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();
}

Есть ли способ указать имя модуля динамически через этот комментарий? Я не знаю, это специфично для машинописного текста или веб-пакета.

Ответы

Ответ 1

Из документов веб-пакета:

webpackChunkName: имя для нового чанка. Начиная с веб-пакета 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: эти комментарии называются волшебными комментариями веб-пакетов.