使用 webpack 在 babel 中包含导入路径

Question

给定如下目录结构：

project
├───common
│   └───js
└───src
    └───js

有什么方法可以将 导入路径 添加到 webpack 以便 src/js 中的脚本可以解析 common/js 中的代码，如果它找不到其他任何东西本地？
类似下面的代码将包括 common/js/CommonClass.js:

import CommonClass from "CommonClass.js";

这很容易做到，例如使用内置指南针 config.rb:

add_import_path "common/scss"

Answer 1

Webpack 在配置中接受多个资源根。

//webpack.conf.js
module.exports = {
   resolve: {
      root: [__dirname + '/common', __dirname + '/src']
   }
};

现在 webpack 也会在两个目录中搜索模块。请注意，该选项仅适用于绝对路径。

有关详细信息，请参阅 webpack docs。

Answer 2

正如鲍里斯所说，您可以使用 resolve 配置。确切的设置有所不同，具体取决于您使用的是 Webpack 1 还是 2。

Webpack 1

resolve: {
  root: [
    path.resolve('./client')
  ]
},

Webpack 2

resolve: {
  modules: [
    path.resolve('./client'),
    'node_modules'
  ]
},

Aliasing 是另一个有用的功能，但我个人觉得上面的配置更容易。

上的指南

Include paths for imports in babel using webpack