web-dev-qa-db-fra.com

Comment générer un nom de bloc d'importation dynamique dans un pack Web

J'appelle de manière dynamique une instruction d'importation dans mon code TypeScript. Sur la base de ce pack Web, des fragments seront créés comme ci-dessous:

enter image description here

vous pouvez voir que Webpack génère automatiquement le nom de fichier en tant que 1,2,3 respectivement, le nom n'est pas un nom convivial

J'ai essayé un moyen de fournir le nom de morceau par le biais de commentaires, mais cela génère 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();
}

Est-il possible de spécifier le nom du module dynamiquement si ce commentaire? Je ne sais pas si cela est spécifique à TypeScript ou à Webpack.

typescriptwebpackwebpack-4
13
Code-EZ

De documents Webpack :

webpackChunkName: nom du nouveau bloc. Depuis Webpack 2.6.0, les espaces réservés [index] et [request] sont pris en charge dans la chaîne donnée en tant que nombre incrémenté ou nom de fichier résolu réel, respectivement.

Vous pouvez utiliser [request] espace réservé pour définir le nom de bloc dynamique.
Un exemple de base serait:

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

Le nom du morceau sera donc cat. Mais si vous mettez la chaîne Cat dans le chemin, [request] lancera un avertissement pendant la construction en disant request was undefined.
Donc cela ne fonctionnera pas:

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

Enfin, votre code ressemblerait à ceci:

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();
  }

Regardez ce numéro de GitHub pour plus d’aide. https://github.com/webpack/webpack/issues/4807

PS: Ces commentaires sont appelés commentaires magiques du webpack .

16
Murli Prajapati