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