关键依赖 - 依赖的请求是一个表达式 Webpack

Question

我在我的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 构建。我也看过其他答案，但他们没有解决我的问题。

Answer 1

经过多次尝试和尝试，找到了解决方案。我所做的是：

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 requires。