Question

我有以下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

Answer 1

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

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

Answer 2

要更具体地回答，最好知道PageHeader和webpack配置的位置：

假设：

PageHeader位于/project/pages/components
，您的webpack配置位于根级/project

然后你的决心看起来像这样：

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

再次取决于webpack配置和components目录的路径。 path.resolve将相应更改。

Answer 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的更多信息。

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

3 个答案: