web-dev-qa-db-ja.com

Webpackで動的インポートチャンク名を生成する方法

私はTypeScriptコードでimport文を動的に呼び出していますが、そのwebpackは以下のようなチャンクを作成します：

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

このコメントを通してモジュール名を動的に指定する方法はありますか？これがTypeScriptまたはwebpackに固有のものであるかはわかりません。

typescriptwebpackwebpack-4
13
Code-EZ

webpack docs から：

webpackChunkName：新しいチャンクの名前。 webpack 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：これらのコメントはwebpack magic commentsと呼ばれます。

16
Murli Prajapati