将 webpack 和 babel 与父项目目录中的文件一起使用答案

【问题标题】：Using webpack and babel with files from parent project directory将 webpack 和 babel 与父项目目录中的文件一起使用
【发布时间】：2016-11-08 05:07:32
【问题描述】：

我有一个像这样设置的项目，我试图从file-b.js 要求file-a.js。

project-name/
  node_modules/
  src/
    file-a.js
  tools/
    tool-name/
      node_modules/
      src/
        file-b.js
      webpack.config.js
      package.json
  package.json

我的webpack 1.13.0 配置一直有效，直到我添加babel-loader 6.2.4 和babel-preset-es2015 6.6.0。然后我开始收到错误消息。

/home/dan/dev/dan/project-name/src/file-a.js 中的错误模块构建失败：错误：找不到相对于目录“/home/dan/dev/dan/project-name/src”的预设“es2015”

现在我有预感会发生这种情况，因为它在上面的package.json 中寻找babel-preset-es2015。我可以通过在该级别安装它来消除此错误，但随后我收到了关于babel 模块不存在的类似消息。

我尝试了各种方法，将上面的src 目录符号链接到内部项目中，使用resolve.root 和resolve.alias 尝试手动解析没有嵌套路径的文件夹。使用context将项目根目录设置为外层文件夹，但还是选错了node_modules。

如何强制 webpack 使用正确的 node_modules 文件夹？

【问题讨论】：

标签： javascript webpack babeljs

【解决方案1】：

默认情况下，webpack 会查找 ./node_modules、../node_modules 和 ../../node_modules。

要强制它只使用特定目录，您可以在resolve 部分中为模块modulesDirectories 属性设置绝对路径：

module.exports = {
  // ...
  resolve: {
     modulesDirectories: [path.join(__dirname, 'node_modules')]
  }
}

更多详情moduleDirectoriesin webpack's documentation

【讨论】：