react 脚手架create-react-app快速配置开发中常见问题，配合antd按需加载

一身转战三千里，一剑曾百万师。这篇文章主要讲述react 脚手架create-react-app快速配置开发中常见问题，配合antd按需加载相关的知识，希望能为你提供帮助。
1、创建脚手架 create-react-app：
①命令行执行：npm install -g create-react-app 安装脚手架工具；
②命令行执行： create-react-app xxx 执行创建一个新的项目(xxx为项目根目录名称)；
③ 命令行执行： cd xxx 跳转到刚刚创建的项目目录下；
④命令行执行： npm start 开启热加载在localhost：3000中运行本地开发环境；
⑤命令行执行： npm run build 启动内置已配好的webpack压缩js、jsx、less、css等文件启动线上环境。（该步骤在本地测试开发环境完成后）。
2、中间可能会遇到的问题：
①线上环境路径出现错误：
解决办法：在package.json中加上"homepage": "."，如图1箭头所示。

文章图片
图1
②打包过后cssjs文件都存在后缀 .map 的文件，使压缩后的文件过大：
解决办法：在node_modules文件夹里的react-scripts 里找到webpack.config.prod.js文件，将devtool改为false即可，如图2所示。

文章图片
图23、安装antd以及按需加载所需依赖：
npm i antd react-app-rewired react-app-rewire-less babel-plugin-import ;
组件包更改启动使用less 组件按需加载
修改package.json 如图：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}

文章图片
package.json在根目录下创建 config-overrides.js 文件，内容如下：
const { injectBabelPlugin } = require(‘react-app-rewired‘);
const rewireLess = require(‘react-app-rewire-less‘);
module.exports = function override(config, env) {
config = injectBabelPlugin(
[‘import‘, { libraryName: ‘antd‘, libraryDirectory: ‘es‘, style: true }], // change importing css to less
config,
);
config = rewireLess.withLoaderOptions({
【react 脚手架create-react-app快速配置开发中常见问题，配合antd按需加载】 modifyVars: { "@primary-color": "#1DA57A" },
javascriptEnabled: true,
})(config, env);
return config;
};