现在你可能对ES5 模块比较熟悉了，如果你用过的话，很可能遇到相对路径引入的一些问题。

使用相对路径引入将使代码变的难以维护，暂且不谈找到这些文件所处的位置。如果你的代码和下面的比较类似的话，then you will be lucky today

import Header from '../../components/Header';
import Grid from '../../components/Grid';
import TransactionForm from '../TransactionForm';
import TransactionSummary from '../TransactionSummary';
import * as AppActions from '../../actions';

import 路径解析方案

将我们的webapack 做一个微小的改动，我们就可以相对文件根目录来引入模块。事实上，我们可以通过配置，以支持解析多个根文件下的引入，并且我们的import 声明将得到极大的改善.

import Header from 'components/Header';
import Grid from 'components/Grid';
import TransactionForm from 'containers/TransactionForm';
import TransactionSummary from 'containers/TransactionSummary';
import * as AppActions from 'actions';//如果node_module中有同名的模块怎么办？

这样看起来就好多了吧…

webpack 1.x 路径配置

通过添加如下配置，就可以支持如上方式的文件引入

resolve: {
  root: [
    path.resolve('./client')
  ]
},

将以上代码添加到你的webpack 1.x 的配置文件中。如果你已经有了resolve 设置，那么就再里面添加一个root 字段就好，然后声明你的文件想要从哪里加载。在我的例子中，这是从./client

添加过多的文件并不好，所以还是请不要随意添加，递归搜索太多的文件位置将导致webpack builde速度变慢，并且很难追踪import 的来源。

webpack 2.x 路径配置

在webpack中，需要像如下设置modules 属性

resolve: {
  modules: [
    path.resolve('./client'),
    path.resolve('./node_modules')
  ]
},

你可以指定多个目录模块，但不要忘记node_modules,否则npm包依赖项将无法加载。

wepack模版项目

你可以使用一个简单的Webpack + Redux + React 模版项目，在你的项目中更加轻松的使用这些功能。

原文地址