React项目使用craco修改webpack配置

React项目使用craco

通过Create React App（CRA）搭建的react项目，webpack的相关配置是被默认隐藏起来的，如果想修改关于webpack的相关配置，有两种方式：

• npm run eject
• craco

npm run eject

npm run eject，会将原本creat react app对webpack，babel等相关配置的封装弹射出来，如果我们要将creat react app配置文件进行修改，现有目录下是没有地方修改的，此时，我们就可以通过eject命令将原本被封装到脚手架当中的命令弹射出来，然后就可以在项目的目录下看到很多配置文件。但这个操作是不可逆的，我们无法再通过其他方式将这些暴露出来的配置还原回去。

craco

通过 craco，开发者可以在不弹出 CRA 的配置的情况下，可以使用自定义的 webpack 插件、babel 插件和其他工具，以满足项目的特定需求。例如，可以添加自定义的 webpack loader，配置自定义的 babel preset 或 plugin，或者修改 webpack 的输出路径等。

安装carco

npm install @craco/craco
npm install craco-less

在项目的根目录创建craco.config.js

const CracoLessPlagin = require('craco-less')
const path = require('path')
const resolve = (dir) => path.resolve(__dirname, dir)
module.exports = {
    plugins: [{ plugin: CracoLessPlagin }],
    // 修改 webpack 配置
    webpack: {
        alias: {
            '@': resolve('src'),
            comp: resolve('src/components')
        }
      
    },
    // 修改 babel 配置
    babel: {
        // ...
    },
    // 修改 eslint 配置
    eslint: {
        // ...
    },
    devServer: {
        proxy: {

        }
    }
};

修改 package.json 文件

 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

修改tsconfig.json

添加

"paths": {
    "@/*": ["./src/*"]
 }

在项目中可以使用 @ 代替 ./src 导入文件

import '@/App.css';

可能遇到的问题

报错：
“@babel/plugin-proposal-private-property-in-object” package without
declaring it in its dependencies. This is currently working because
“@babel/plugin-proposal-private-property-in-object” is already in your
node_modules folder for unrelated reasons, but it may break at any time.

解决办法：
npm install --save-dev @babel/plugin-proposal-private-property-in-object