关键依赖项 - 依赖项的请求是一个表达式 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构建。我也看过其他答案，但它们没有解决我的问题。

- Subham Tripathi

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 文档），请阅读动态要求。

- Subham Tripathi

---

帮我节省了大量的时间。谢谢！ - Chip Castle

我在vuejs中遇到了这个问题。重点在于这一行：“始终编写一些根文件夹的硬编码路径。不要将其放入变量中，因此这样不起作用”。 - hitautodestruct

@hitautodestruct，抱歉，我不太明白你的评论。你能否重新表述一下？ - Subham Tripathi

@SubhamTripathi 我的意思是你帮助我解决了我引用的那行代码的问题，应该强调一下 :-) - hitautodestruct

@jrh 谢谢你提供的更新链接。我已经在答案中更新了它们。 - Subham Tripathi

一个拥抱，你值得拥有！ - Rigoberta Raviolini