Webpack 无法解析目录中的模块答案

【问题标题】：Webpack can't resolve module in directoryWebpack 无法解析目录中的模块
【发布时间】：2019-07-13 06:35:14
【问题描述】：

我正在将旧的 RequireJS/CommonJS/AMD/Knockout 东西迁移到 Webpack。当我尝试编译代码时，我收到一条错误消息：

./Scripts/pbkdf2.js 中的错误未找到模块：错误：无法解析“C:@Code\Scripts”中的“/Scripts/sha1”

我了解错误，但无法让 Webpack 为 /Scripts/sha1 依赖项解析 /Scripts 目录。

相关的Webpack配置选项：

config = {
  resolve: {
    modules: [
      path.resolve(__dirname),
      "node_modules"
    ]
  }
}

/Scripts/pbkdf2.js 文件的定义如下：

define("/Scripts/pbkdf2", ["/Scripts/sha1"], function (sha1) {
  ...
})

我尝试为path.resolve(__dirname, "Scripts") 添加resolve.module，但没有奏效。我认为如果我这样做可能会起作用，然后从/Scripts/sha1 中删除/Scripts/ 部分，但我想避免遍历整个项目并更新所有这些引用。

如何让 Webpack 根据我的项目的根目录解析这些子目录？我以为path.resolve(__dirname) 是这样做的，但它似乎不是项目根目录，而是正在执行文件的目录？

【问题讨论】：

【解决方案1】：

我想我可以通过提供将/Scripts/* 模块映射到适当的基本目录的resolve.alias 来解决我的问题。我猜 RequireJS 是在尝试相对解析路径，而不是使用我的 Webpack resolve.modules 配置。

对配置的相关更改：

config = {
  resolve: {
    alias: {
      "/Scripts": path.resolve(__dirname, "Scripts")
    }
  }
}

这个别名匹配所有以 /Scripts 开头的 require 模块，所以它似乎能够像我现在期望的那样解析我的模块。

【讨论】：