如何正确配置 module.alias答案

【问题标题】：How to configure module.alias properly如何正确配置 module.alias
【发布时间】：2023-03-23 17:12:01
【问题描述】：

我想在使用 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。

【问题讨论】：

【解决方案1】：

怎么样？

import Component from 'components'

【讨论】：

我收到错误消息：Can't resolve 'components' in '/Users/.../Container.js'
webpack 别名正在尝试做这件事……似乎路径可能有点偏离。尝试像这样设置它。 xabikos.com/2015/10/03/Webpack-aliases-and-relative-paths

【解决方案2】：

需要给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';
...

【讨论】：