基于create react app构建项目，React引入webpack alias遇到的问题及解决方法

• 前端三大框架，一直用vue，最近脑子一热，想换react，刚好手上有个项目比较简单，拿来上手。首先，react文档大略看一下，了解一下react的特性，主要看看prop、state、life cycle、 route（vue的思路），然后，迫不及待准备踩坑去了。
• 用create react app（简称CRA)搭建了一个项目，yarn start 了一把。ok，helloword顶级代码出来了。接下来要装依赖了，前端搞来搞去，还是离不开html、css、js，我这边主要使用typescript、 sass，于是装吧：

npm i node-sass sass-loader -D

• （node-sass通过连接中间件自动将.scss文件本地编译为css），之前vue一直使用elementUI，react用antd吧（大家用了都说好），所以装了个antd，再来个

npm i react-dom react-router -S

• 然后就去写代码去了，等写到header组件时，要引入图片，想着我的图片大都放在src/assets/images目录下，我不想每次引用图片时，总是写这么一大坨路径，这样我得用webpack的alias自定义一下路径吧，于是要去更改webpack配置文件，但是配置文件封装在react-scripts里了，这又不像vue，还有个vue.config.js，于是网上查，网上说用npm run eject可以弹出配置文件，根据我package.json的script指令：

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
 },

于是我yarn eject（npm run eject）了一下，报错了

Remove untracked files, stash or commit any changes, and try again.
error Command failed with exit code 1. 

意思是说兄弟你得先

git add . 
git commit -m 'eject after commit'

但是npm run eject是不可逆的，因为不可逆，如果后续的create-react-app更新了并添加了很多不错的功能，你想应用到你的项目中，本来你可以通过更新 create-react-app版本来实现，现在就不行了。
那怎么办呢，来看看ant.design，使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案）。于是我们安装 craco 并修改 package.json 里的 scripts 属性。

$ yarn add @craco/craco
/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。来简单配置一下craco.config.js 文件

'use strict';
const path = require('path');
const fs = require('fs');

module.exports = {
  webpack: {
    alias: {
      '@images': path.resolve(__dirname, 'src/assets/images'),
      '@fonts': path.resolve(__dirname, 'src/assets/fonts'),
      '@videos': path.resolve(__dirname, 'src/assets/videos'),
    },
  },
};

然后yarn start狂奔吧。我经常有这种想法，不管我做什么事，总有些莫名其妙的问题等着我，非要摧残一下我让我唱征服，果然报错了：

node_modules/autoprefixer/node_modules/kleur' do not define a valid './colors' target

Stack Overflow大法教我install latest version of autoprefixer，于是：

npm install autoprefixer@9.8.0

yarn start一把，好了编译通过了，老夫悬着的心终于归位了。再回到我久违的header组件内

/* 引入svg图片 */
import logo from '@images/logo.svg';

/* 调用 */
<img className="logo" alt="" width="150" height="40" src={ logo } />

ok，logo图片出来了，我该去跳别的坑了。

参考资料：

1. create-react-app添加图片、字体和文件官方文档
2. eject副作用