web-dev-qa-db-ja.com

重要な依存関係-依存関係の要求は式Webpackです

次のように、angularアプリケーションでサービスを使用してuibModalを作成しています

function modal(modalConfig){
                  var modalInstance = $uibModal.open({
                  animation: true,
                  template: require("../a/b/xyz.html"),
                  controller: modalConfig.controller,
                  size: modalConfig.size,
                  controllerAs: modalConfig.controllerAs,
                  bindToController : true,
                  resolve: modalConfig.resolveObj

                });
            }

行に注意してください

 template: require("../a/b/xyz.html"),

このような場所で変数を使用したい

 template: require(modalConfig.templateUrl),

しかし、ハードコードされた値の代わりに変数を使用すると、webpackは私に与えます

Critical dependencies:
83:22-54 the request of a dependency is an expression

このエラーを解決できません。考えられる理由は何ですか？

利用した node-express継続的なwebpackビルド用のサーバー。他の回答も調べましたが、私の質問は解決されませんでした。

angularjsexpresswebpack
16
Subham Tripathi

多くのヒットとトライアルが解決策を見つけた後、私がしたことはこれです：

_template: require("../../scripts" + modalConfig.templateUrl + ".html")
_

仮定

  1. すべてのファイルが含まれるルートフォルダはscriptsです
  2. 関数が記述されているファイルからのこのフォルダーの相対パスは、_../../scripts_です。
  3. _../../scripts_ + _modalConfig.templateUrl_ + _".html"_は、使用するファイルの正しいパスを形成します。

必須メモ

  1. ルートフォルダーのハードコーディングされたパスを常に書き込みます。変数に入れないでください。これはうまくいきません

    var context = "../../scripts" ; template: require(context + modalConfig.templateUrl + ".html")

ベースパス（実際のパスの一部など）は、基本的な参照用にハードコーディングする必要があります。これは、動的な要求に必要なすべてのモジュールのリストをWebpackが作成するのに役立つためです。

理由（webpack docs から）、 dynamic require をお読みください。

22
Subham Tripathi