如何正确配置module.alias [英] How to configure module.alias properly

问题描述

我想使用 React 入门套件.

I would like to use resolve.alias feature from webpack in my projects using React Starter Kit.

例如:

改为:

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

我想用

import Component from 'components/Component

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

I've added this configuration on config.js file:

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

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

This resolve.alias enables aliases for projects bundled with webpack but doesn't working with React Starter Kit.

推荐答案

您需要配置 别名 与完整路径:

You need to configure alias with the full path:

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

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

Instead of using alias, I usually use modules to "mount" my entire src folder:

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

假设我有一个目录结构，如:

which, assuming I have a dir structure like:

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

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

let's me write these sorts of imports:

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

这篇关于如何正确配置module.alias的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！