Webpack“解析”功能是否解析 AMD 样式路径定义？答案

【问题标题】：Does the Webpack "Resolve" feature resolve AMD style path definitions?Webpack“解析”功能是否解析 AMD 样式路径定义？
【发布时间】：2015-04-10 14:33:02
【问题描述】：

我正在尝试在这里获得一个非常简单的概念证明......我有一个使用 AMD 的 js 库，但我需要依赖关系来解析到 node_modules。所以我有以下内容：

webpack.config.js

module.exports = {
  entry: "./resources/content/scripts/twitter_module",
  output: {
    path: path.join(__dirname, "build"),
    filename: "out.js",
  },
  resolve: {
    root: __dirname,
    modulesDirectories: [ path.join(__dirname, "node_modules") ]
  }
};

这是我从 webpack 得到的输出：

Hash: bab530b56faec6755978
Version: webpack 1.8.2
Time: 49ms
 Asset    Size  Chunks             Chunk Names
out.js  8.6 kB       0  [emitted]  main
   [0] ./resources/content/scripts/twitter_module.js 6.44 kB {0} [built] [3 errors]

ERROR in ./resources/content/scripts/twitter_module.js
Module not found: Error: Cannot resolve module 'vendor.asset.jquery/jquery' in /Users/bob/projects/repository/resources/content/scripts
 @ ./resources/content/scripts/twitter_module.js 3:0-198:2

ERROR in ./resources/content/scripts/twitter_module.js
Module not found: Error: Cannot resolve module 'vendor.asset.jquery/jquery.ie.cors' in /Users/bob/projects/repository/resources/content/scripts
 @ ./resources/content/scripts/twitter_module.js 3:0-198:2

ERROR in ./resources/content/scripts/twitter_module.js
Module not found: Error: Cannot resolve module 'vendor.asset.moment/moment' in /Users/bob/projects/repository/resources/content/scripts
 @ ./resources/content/scripts/twitter_module.js 3:0-198:2

输出表明未使用/应用解析配置。它仍在尝试导入它们的模块的同一目录中寻找脚本。解析仅适用于 common.js 需要吗？我读过的文档和示例中的每一件事似乎都表明这应该可行。

包括目录结构：

➜  repository  pwd
/Users/bob/projects/repository

➜  repository  ls resources/content/scripts/twitter_module.js
resources/content/scripts/twitter_module.js

这些供应商软件包中存在外部依赖项：

➜  repository  ls vendor.asset.jquery/content/scripts/jquery.js
vendor.asset.moment/content/scripts/jquery.js

➜  repository  ls vendor.asset.moment/content/scripts/moment.js
vendor.asset.moment/content/scripts/moment.js

【问题讨论】：

请添加您的项目文件/文件夹结构。
添加了一些目录路径引用。我实际上并没有试图解决 node_modules，我只是认为它会更容易解释。我期待我在解析配置中定义的路径显示在 webpack 输出中
您是否有服务器正在为您的文件提供服务，或者您是否通过file:/// 打开您的文件？
现在我并没有考虑 Web 服务器或提供这些文件，我只想在 webpack 中定义一个入口脚本并让它编译该脚本及其所有依赖项。我所有的目录引用都只是标准的 unix 路径。如果您使用 common.js 要求，这似乎不是问题，但我的库都使用 AMD 定义，webpack 应该支持。
您需要让 webpack 可以访问文件，因此在使用服务器时，还必须提供所需的依赖项。然后 webpack 将能够访问这些文件。我很难知道如何解决问题，而不知道你是怎么做的，你的文件夹结构是什么等等。

标签： javascript node.js amd webpack

【解决方案1】：

所以我遇到的问题是 Webpack 日志输出似乎有点误导。当您有多个“解析”位置时，尽管搜索其他路径并在解析配置中定义了根路径，但似乎 webpack 仅将当前目录报告为缺失依赖项的位置。如果你有一个路径问题，比如说你的根解析路径，webpack 不会表明它试图去那里。

【讨论】：