1、創(chuàng)建腳手架 create-react-app：
? ? ①命令行執(zhí)行：npm install -g create-react-app 安裝腳手架工具伟骨；
? ? ②命令行執(zhí)行：?create-react-app xxx? 執(zhí)行創(chuàng)建一個新的項目(xxx為項目根目錄名稱)饮潦；
? ? ③?命令行執(zhí)行： cd xxx? 跳轉(zhuǎn)到剛剛創(chuàng)建的項目目錄下；
? ? ④命令行執(zhí)行： npm start? 開啟熱加載 在localhost：3000中運行本地開發(fā)環(huán)境携狭；
????⑤命令行執(zhí)行： npm run build? 啟動內(nèi)置已配好的webpack壓縮js继蜡、jsx、less逛腿、css等文件啟動線上環(huán)境稀并。（該步驟在本地測試開發(fā)環(huán)境完成后）。
2单默、中間可能會遇到的問題：
????①線上環(huán)境路徑出現(xiàn)錯誤：?
????解決辦法：在package.json中加上"homepage": "."碘举，如圖1箭頭所示。
????②打包過后css\js文件都存在后綴 .map 的文件搁廓，使壓縮后的文件過大：
?????解決辦法：在node_modules文件夾里的react-scripts 里找到webpack.config.prod.js文件引颈，將devtool改為false即可，如圖2所示枚抵。
3线欲、安裝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"
? }
在根目錄下創(chuàng)建??config-overrides.js 文件 ，內(nèi)容如下：
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({
? ? ? ? modifyVars: { "@primary-color": "#1DA57A" },
? ? ? ? javascriptEnabled: true,
? ? })(config, env);
? ? return config;
};
