在 create-react-app创建的项目中使用craco插件覆盖默认react-script的webpack配置

前言：

对于命令： create-react-app 创建的项目默认使用的是 react-scripts（存在于node_modules文件夹中）来处理开发服务器和构建，它内置了一些webpack相关配置。而 craco（Create React App Configuration Override）是用来定义和覆盖由 create-react-app 内置配置的插件。而想要更好的配置我们的webpack不需要每次修改都去react-scripts中修改的话，则可以使用该插件会更加的方便，目前npm官网中也在持续的更新迭代到7.x版本了。

一、使用的原因：

        由于我在搭建项目时，使用 create-react-app 创建的react项目中引入文件时往往必须使用'../'、'./' 来进行，当然有的小伙伴会说：“你好蠢哦，不知道去react-scripts/config中的webpacke文件去配置alies嘛？”。当然这是一种方式（具体实现在后文会体现），这时我们可以使用“@”符号代替“src”目录，但细心的人会发现该项目不像umi或next创建的会有vs code提示选项，往往需要手动输入才行，这这...，像我这么懒的人，打死都不想输入啊！！！于是便有了该文章。

二、react-scripts默认配置“@”

        先来说说不使用craco插件时如何默认配置“@”，前提条件使用如下命令创建的项目：

create-react-app 文件名 

1. 找到项目中node_modules文件夹
2.  打开此文件夹找到react-scripts -> config -> webpack.config.js 文件打开找到 alies 属性
3. 在 alies 属性中添加如下代码后重启项目即可生效

"@": path.resolve('src')

以上方式缺点：vscode提示器不生效，一旦本地node_modules 文件被删除，重新下载node_modules依赖则会被重置掉。

三、craco 插件使用

        为了解决上述方式的缺点，使用craco插件能快速解决。

1、craco简介：

        craco（Create React App Configuration Override）用来自定义由 create-react-app 创建的项目内部配置，比如修改 webpack 配置，覆盖react-scripts的默认设置等等....

 2、craco使用：

 2.1 安装：

 npm install  @craco/craco react-app-rewire-alias（建议安装在dependencies中）

2.2 配置：

        由于现在使用craco插件进行配置，所以上述在 react-scripts中默认配置可以去除。

        首先，在项目根目录下创建 craco.config.js 文件，并且在package.json文件中修改一些配置如下：

• craco.config.js 文件配置

const path = require("path");
const { CracoAliasPlugin } = require("react-app-rewire-alias");

module.exports = {
  // webpack 配置
  webpack: {
    // 更改build打包文件名称为dist
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.output.path = path.resolve(__dirname, "dist");
      paths.appBuild = path.resolve(__dirname, "dist");
      return webpackConfig;
    },
  },
  // 配置别名
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {
        "@": path.resolve(__dirname, "src"),
      },
    },
  ],
};

• 在package.js 文件配置

// 将如下模块代码
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts  build",
    "test": "react-scripts  test",
    "eject": "react-scripts eject"
  },
// 换成
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

以上配置完成后重启项目，会发现“@”符号可以正常使用但vsCode编辑器并没有提示框出现

• 在根目录下创建jsconfig.json 文件配置

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

此时重启项目生效

此时其他配置webpack操作我们都可以在craco.config.js文件中进行，比如设置代理、优化打包等等配置