如何在 React Static Boilerplate 中创建 webpack 导入别名？答案

【问题标题】：How do I create a webpack import alias in React Static Boilerplate?如何在 React Static Boilerplate 中创建 webpack 导入别名？
【发布时间】：2016-05-03 13:07:48
【问题描述】：

我有以下import：

// cwd: /project/pages/blog/category/red/index.js

import PageHeader from '../../../components/PageHeader';

我希望能够以这种方式编写它（在我的项目中的任何地方）：

// cwd: /project/pages/blog/category/red/index.js

import PageHeader from 'components/PageHeader';

我尝试过使用 webpack resolve option 但我似乎无法让它工作：

config.resolve = {
  alias: {
    components: [
      path.resolve('../components/')
    ]
  }
};

和

config.resolve = {
  root: [
    path.resolve('../')
  ]
};

我错过了什么吗？

我的应用架构是从 React Static Boilerplate 分叉的，所以我的 webpack.config.js 看起来像 this one

【问题讨论】：

尝试按照this answer设置root？
root 适用于我的 webpack 设置
@ivarni 是的，我做了，（并更新了我的答案），仍然没有解决
啊，你想提供一个根数组吗？
我都试过了，一个简单的字符串和一个数组。

标签： javascript reactjs ecmascript-6 webpack

【解决方案1】：

config.resolve = {
  alias: {
    components: path.resolve('../components/')
  }
};

alias 接受键值对，值的类型为string。我不确定它是否适用于数组。

【讨论】：

【解决方案2】：

要更具体地回答，最好知道PageHeader 和您的webpack 配置在哪里：

假设：

PageHeader 在/project/pages/components
并且您的webpack 配置位于根级别/project

那么你的决心应该是这样的：

config.resolve = {
  alias: {
    components: path.resolve('./pages/components')
  }
};

再次，它取决于您的 webpack 配置和您的 components 目录的路径。 path.resolve 会相应地改变。

【讨论】：

【解决方案3】：

这个问题似乎与 React Static Boilerplate 有关，更具体地说，是在构建静态页面时。

我找到了一个解决方法，现在可以完成这项工作。我必须在别名前面加上 ~，这样它就不会被“视为”为 node_module..

config.resolve = {
  alias: {
    "~components": path.resolve(__dirname, '../components'),
    "~decorators": path.resolve(__dirname, '../core/scripts/decorators'),
    "~helpers": path.resolve(__dirname, '../core/scripts/helpers'),
    "~i18n": path.resolve(__dirname, '../core/i18n'),
  }
};

用法：

import fetch from '~helpers/fetch';
import header from '~components/header';

有关此on this Github issue 的更多信息。

【讨论】：