如何正确配置module.alias

时间:2017-07-24 21:03:26

标签: javascript reactjs webpack isomorphic-javascript react-starter-kit

我想使用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不兼容的项目启用别名。

2 个答案:

答案 0 :(得分:1)

您需要使用完整路径配置alias

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

我不是使用别名,而是使用modules来" mount"我的整个src文件夹:

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';
...

答案 1 :(得分:0)

怎么样?

import Component from 'components'