写在前面：首先要用 `npm run eject` 将配置文件暴露，会多一个config文件夹，才能继续下面的配置
1、antd 的定制主题
在config -> webpack.config.js 的 getStyleLoaders 的function 中修改，实现自定义主题颜色，具体的颜色值变量参考antd官网定制主题部分
// 将 if (preProcessor) { loaders.push({ loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, }, }); } return loaders; // 修改为： if (preProcessor) { const loader = { loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, }, } if (preProcessor === 'less-loader') { loader.options = { ...loader.options, modifyVars: { 'primary-color': '#0A6ED1', 'link-color': '#1890ff', // 链接色 'success-color': '#107e3e', 'warning-color': '#e9730c', // 警告色 'error-color': '#BB0000', }, javascriptEnabled: true, } } loaders.push(loader); }2、antd 按需加载配置
{ test: /\.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { customize: require.resolve( 'babel-preset-react-app/webpack-overrides' ), plugins: [ [ require.resolve('babel-plugin-named-asset-import'), { loaderMap: { svg: { ReactComponent: '@svgr/webpack?-svgo,+ref![path]', }, }, }, ], // 新加这一行实现antd按需加载 [ "import",{libraryName: "antd", style: true}] ] }3、性能优化配置
devtool: isEnvProduction ? shouldUseSourceMap ? 'source-map' : false : isEnvDevelopment && 'cheap-module-source-map', // 修改为： devtool: isEnvProduction ? false : isEnvDevelopment && 'cheap-module-source-map', // sourcemap 是方便追溯代码的，可以去掉4、css-modules 的配置
getStyleLoaders 方法中的 { loader: require.resolve('css-loader'), options: cssOptions, }, 修改为： { loader: require.resolve('css-loader'), options: { ...cssOptions, modules: true, // 新增对css modules的支持 localIdentName: '[name]__[local]__[hash:base64:5]', // } }, 即可使用css module 去定义自己的样式5、使用mock-data
（1）创建一个新的mock-server 项目， npm 安装 mock.js，我的项目目录为
（2）创建server.js 配置mock server
// server.js var express = require("express") var app = express(); var bodyParser = require('body-parser'); app.use(bodyParser.json()); //body-parser 解析json格式数据 app.use(bodyParser.urlencoded({ //此项必须在 bodyParser.json 下面,为参数编码 extended: true })); var router = express.Router(); app.get('/', function(req, res) { res.send('hello world'); }); router.use("/test",require('./test')); app.use("/",router) app.listen(8000, () => { console.log('getData-----') // debug(`The fake API server is listening on ${'3001'.rainbow}.`) })npm run mock , 访问 http://localhost:8000 看看是否能看到 hello world
（3）创建mockdata
// test.js Mock = require("mockjs") var express = require("express") var router = express.Router(); router.use("/profile",function (req,res) { console.log(req.body); //调用mock方法模拟数据 var data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1 }] } ); return res.json(data); }) module.exports = router;npm run mock 访问http://localhost:8000/test/profile，能看到测试数据， 将你自己的mock数据按照这个写入
(4) 项目配置，在src 目录下创建 setupProxy.js, 将需要访问mock数据的请求，改为 /mock 开头
// setupProxy.js const proxy = require("http-proxy-middleware"); module.exports = function(app) { app.use( proxy("/mock/**", { target: "http://localhost:8000/mock", changeOrigin: true }) ); };（5）由于项目中会报cors 跨域问题, 在package.json 中加入
"proxy": "http://localhost:8000/"
