javascript - 如何正确配置 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

你需要配置alias完整路径:

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

我通常不使用别名，而是使用 modules “挂载”我的整个 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';
...