react中配置webpack，支持@符号导入模块

在项目中，如果我们的路径结构很复杂，那么我们可能导入其他模块的时候不是很方便，这时候，我们可以配置webpack以配置别名的形式访问

执行eject

在项目中执行 $ npm run eject 这个命令只能执行一次，而且不可逆转，它会把react-scripts 封装的一些webpack配置等全部解压到项目目录，项目结构中会多出 config 目录 和 scripts 目录，我们的需要配置的地方就在config 目录中, 其中有两个文件需要需改：webpack.config.dev.js 和 webpack.config.prod.js 文件，两个文件都是修改的同一处配置。

修改配置，添加alias别名

在webpack.config.dev.js 和 webpack.config.prod.js 文件中搜索 alias 关键词，在相关对象中添加一个键值对：'@': paths.appSrc，此时的appSrc 就是项目的src目录

由于技术栈时时升级，为了防止技术升级造成的无法匹配问题的现象，在此添加版本信息如下：

"devDependencies": {
  "react-scripts": "^1.1.4"
},
"dependencies": {
   "react": "^16.3.2"
}

此时的版本下执行 $ npm run eject 再修改上面的配置是没有任何问题的

修改导入文件的写法

好了，现在我们想要导入 src/pages/home/index.js 只需要把import的路径写成 @/pages/home 就可以了，或者也可以按照相对路径的写法导入，其中这里要说明的一些情况是如果目录中存在index.js可以直接写成目录名称，不需要写全路径，因为如果访问某一目录，它默认找的就是index.js， 就像是上面的写法，我们可以写成 @/pages/home 的形式，也可以写成 @/pages/home/index.js 的形式

最后总结

修改完毕，这样以后导入模块就方便多了！