如何正确配置 module.alias

我想用resolve.alias我的项目中使用 webpack 的功能反应入门套件 https://github.com/kriasoft/react-starter-kit.

例如：

相反，这个：

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

我想用

import Component from 'components/Component

我已经添加了这个配置config.js file:

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

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

你需要配置alias https://webpack.js.org/configuration/resolve/#resolve-alias与完整路径：

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

我通常不使用别名，而是使用modules https://webpack.js.org/configuration/resolve/#resolve-modules“安装”我的整个src folder:

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

其中，假设我有一个类似的 dir 结构：

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

让我编写这些类型的导入：

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