IT技术 - 如何正确配置module.alias - 吾爱随笔录

IT技术 javascript reactjs webpack isomorphic-javascript react-starter-kit

2021-05-17 00:04:01

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

例如：

取而代之的是：

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

我想用

import Component from 'components/Component

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

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

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

2个回答

您需要使用完整路径配置别名：

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

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

怎么样？

import Component from 'components'

其它你可能感兴趣的问题