create-react-app以后如何配置webpack

当我们通过create-react-app脚手架安装了一个react项目以后，如果项目变的庞大以后，别名，插件都需要自己配置。那我们就该问题总结一下：

1.create-react-app music-app
2.npm run start

3.回到项目，我们看看目录里面缺少一些文件在src下新增：
***assets：存放png、jpg、gif、sag等，
***components ：存放模块文件
***css：样式文件
***在componets文件夹下新建App，将App相关文件移到下面。（App.css、App.js、App.test.js）
***将logo.svg文件移到assets下。
4.npm run start 启动项目，不报错

5.脚手架已经内置了webpack的配置，那么怎么要自定义webpack配置呢？ 运行npm run eject

在终端命令中出现以上提示信息，表示eject成功。
4.首先npm run eject不可逆，执行完他以后，出现成功的提示信息以后，我们进入项目，找一个config的文件夹，所有脚手架的配置文件，都存放在这个文件夹里面。这样我们就成功的把所有配置文件都暴露出来了。

5.在这个config里面就有webpack.config.dev.js等配置文件。 6.接下来我们要引入插件还是loader还有别名都可以在此配置。比如配置别名

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      '@': resolve('src'),
    }
  },
}

  import Hello from '@components/Hello';