在 Webpack 2 中使用后备解析 ES6 导入路径答案

【问题标题】：Resolving ES6 import path with fallback in Webpack 2在 Webpack 2 中使用后备解析 ES6 导入路径
【发布时间】：2016-12-09 05:14:15
【问题描述】：

我的文件夹结构如下：

- test
  - scripts
      index.js
      user.js
- default
  - scripts
      index.js
      api.js
      user.js

我需要在本地解析一个导入路径（“test”目录），而失败的回退应该通过“default”目录来解决。

test/scripts/index.js 中的代码是：

import api from 'scripts/api'; // should be taken from 'default'
import user from 'scripts/user; // should take the local 'user.js'
...

我正在使用具有以下配置的 Webpack 2.1.0：

...
resolve: {
    modules: [
        path.resolve( './default' )
    ]
}
...

此配置使 webpack 能够通过 'default' 解析所有模块 'script/*' 路径，而相对 './script/*' 路径永远不会超出模块的目录，因此不能使用相对路径作为后备。

Webpack 2 似乎不支持 resolve.fallback

我尝试向normal-module-factory->before-resolve 编写插件，但我收到的唯一路径是入口路径。

是否有任何可能的配置来解决这个问题？编写自定义加载器是否可以解决？

谢谢

【问题讨论】：

可以resolve.modulesDirectories帮忙吗？
@CD.. 恐怕不会。我不是在寻找祖先，而是在一定程度上寻找兄弟姐妹。另外，据说 webpack 2 的 resolve 配置与 1.x 不同。

标签： webpack

【解决方案1】：

你可以试试这个

resolve: {
  modules: [
    path.resolve(__dirname, 'path/to/source-folder'),
    path.resolve(__dirname, 'path/to/fallback-folder'),
    'node_modules',
  ]
}

或试试这个插件： https://www.npmjs.com/package/webpack-fallback-directory-resolver-plugin

【讨论】：