Question

我正在尝试将webpack配置为在我的React应用中使用干净导入：

import { userConstants } from 'constants';

代替：

import { userConstants } from '../../constants';

在webpack.config.js中，我定义了：

resolve: {
  modules: [
    "node_modules",
    helpers.root('client/app')
  ],
  extensions: ['*', '.js', '.jsx']
},

在添加名为constants的文件夹之前，此方法非常有效。我不知道我的node_modules是否会出现某种冲突，因为当我将文件夹名称更改为_constants时，我得到了一个消失的错误：

“ ./ client / app / actions / user.actions.js 83：12-25中的警告”导出在“常量”中找不到“ userConstants”

我的问题：我应该在webpack配置中为每个文件夹定义一个别名吗？ components，containers，constants，reducers，actions，services？

Answer 1

是的，您必须为每个文件夹使用别名，如下所示：

alias: {
    constants: path.resolve(APP_DIR, 'constants'),
    api: path.resolve(APP_DIR, 'api'),
    components: path.resolve(APP_DIR, 'components'),
    reducers: path.resolve(APP_DIR, 'reducers'),
  }

这将有助于解析和导入模块。并确保您使用正确的APP_DIR

webpack解决冲突？我应该使用别名吗？

1 个答案: