create-react-app创建的项目中设置webpack配置

 create-react-app 创建的项目默认使用的是 react-scripts（存在于node_modules文件夹中）来处理开发服务器和构建，它内置了一些webpack相关配置。一般不会暴露出来给开发者，但是在有些情况下我们需要修改下webpack默认配置，如修改outputPath、sourcemap方案等，但由于 eject是不可逆的，所以craco插件应运而生，为我们提供了更好的解决方案。

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

安装：

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

 配置：

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

// 将如下模块代码
"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"
  },

 craco.config.js 文件配置：

const path = require("path");
const { CracoAliasPlugin } = require("react-app-rewire-alias");
 
module.exports = {
  // webpack 配置
  webpack: {
    // 配置内容
  },
  // 配置别名
  plugins: [
    // 配置内容
  ],
};

以上配置完成后重启项目