如何正确配置 module.alias

Question

我想在我使用 React Starter Kit 的项目中使用来自 webpack 的 resolve.alias 功能。

例如：

改为：

import Component from '../../components/Component

我想用

import Component from 'components/Component

我在 config.js 文件中添加了这个配置：

resolve: {
  alias: {
    components: './src/components'
  }
}

此 resolve.alias 为与 webpack 捆绑在一起但不适用于 React Starter Kit 的项目启用别名。

Answer 1

怎么样？

import Component from 'components'

Answer 2

您需要配置 alias 完整路径：

resolve: {
  alias: {
    components: path.resolve(__dirname, './src/components')
  }
}

我通常不使用别名，而是使用 modules 来 "mount" 我的整个 src 文件夹：

resolve: {
  modules: [
    path.resolve(__dirname, "./src"),
    'node_modules',
  ],

假设我的目录结构如下：

src/
src/components/...
src/util/...
src/routes/...
src/views/...

让我来写这些导入：

import C from 'components/C';
import foo from 'util/foo';
import routes from 'routes/blah';
...

How to configure module.alias properly