最近在熟悉react,通过react create app创建项目后,并不像以前一样可以进行webpack的配置,官方文档有写到可以npm run eject暴露所有配置,会发现根目录下生成了 config 目录,但是此操作是不可逆的。
如果需要在项目中配置一些webpack配置,需要在根目录下新建一个名称为config-overrides.js的文件
1、下载antd 包
npm install antd
复制代码
2、安装customize-cra,引入react-app-rewired插件
react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置
npm install react-app-rewired customize-cra babel-plugin-import
复制代码
3、自定义less-loader,改变antd默认样式
npm install less less-loader
复制代码
4、在根目录下面新建config-overrides.js,并修改相关配置
const { override, fixBabelImports, addLessLoader, addWebpackAlias } = require("customize-cra");
const path = require("path");
module.exports = override(
// 针对antd 实现按需打包:根据import来打包 (使用babel-plugin-import)
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true, //自动打包相关的样式 默认为 style:'css'
}),
// 使用less-loader对源码重的less的变量进行重新制定,设置antd自定义主题
addLessLoader({
javascriptEnabled: true,
modifyVars: { "@primary-color": "#1DA57A" },
}),
//增加路径别名的处理
addWebpackAlias({
'@': path.resolve('./src')
})
);
复制代码
5、修改packge.json 的配置文件
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react--app-rewired test",
"eject": "react-scripts eject"
},
复制代码
6、最后,在app.js引入需要的组件即可
import { Button, Table } from "antd";
复制代码