使用過create-react-app（以下簡稱cra）的朋友都知道，這是react官方的一款腳手架工具，內(nèi)部集成了babel阅茶，webpack，webpack-dev-server等等谅海。
以前我們要在cra中做webpack的配置脸哀，有三種方式：
1、運(yùn)行npm?run?eject得到原始的webpack配置文件config扭吁，然后可以看到里面有prod和dev兩個(gè)環(huán)境的相關(guān)配置撞蜂；但是新版本cra你run?eject之后盲镶，只有一個(gè)webpack.config.js文件了。
可以在這里面進(jìn)行配置蝌诡。但是本文中這不是我們推薦的方式溉贿。
2、不run?eject浦旱。而是改寫script文件中的js顽照。這個(gè)本人沒有操作過，這個(gè)就不詳談了闽寡。
3代兵、使用react-app-rewired，安裝這個(gè)工具后爷狈，在項(xiàng)目根目錄中新建文件config-overrides.js文件植影。此時(shí)我們便可以在其中進(jìn)行各種webpack的騷操作了~
但是！react-app-rewired2.x以后涎永，不再支持injectBabelPlugin的方式思币，需要安裝customize-cra。
具體的羡微，ant?design官方文檔已經(jīng)給出了最新的解決方案谷饿。請前往詳覽。https://ant.design/docs/react/use-with-create-react-app-cn
這種方式就是我們推薦的方式妈倔。因?yàn)闊o需生成更多額外的文件博投，同時(shí)配置又趨于更簡單可控的方式。
接下來我們就來具體說一下操作步驟盯蝴。
首先毅哗，我們安裝react-app-rewired。
$?yarn?add?react-app-rewired
然后修改package.json文件如下捧挺，
復(fù)制代碼
```
/*?package.json?*/
"scripts":?{
-???"start":?"react-scripts?start",
+???"start":?"react-app-rewired?start",
-???"build":?"react-scripts?build",
+???"build":?"react-app-rewired?build",
-???"test":?"react-scripts?test",
+???"test":?"react-app-rewired?test",
}
```
復(fù)制代碼
接著虑绵，安裝customize-cra
```$?yarn?add?customize-cra```
然后在根目錄下添加config-overrides.js文件。
```module.exports?=?function?override(config,?env)?{
??//?關(guān)于webpack的相關(guān)配置
??return?config;
};```
好了闽烙，基本的操作就是這樣翅睛。下面我們再來說具體到我們的項(xiàng)目中，需要做的一些配置黑竞。
1捕发、react項(xiàng)目中我們最常用的組件庫antd，我們需要配置按需加載摊溶。
使用babel-plugin-import爬骤，它是一個(gè)用于按需加載組件代碼和樣式的?babel?插件。
安裝
```$?yarn?add?babel-plugin-import```
接著配置webpack?
復(fù)制代碼
```/*?config-overrides.js?*/
+?const?{?override,?fixBabelImports?}?=?require('customize-cra');
-?module.exports?=?function?override(config,?env)?{
-???return?config;
-?};
+?module.exports?=?override(
+???fixBabelImports('import',?{
+?????libraryName:?'antd',
+?????libraryDirectory:?'es',
+?????style:?'css',
+???}),
+?);```
復(fù)制代碼
這樣我們在組件中就可以按需引入組件庫中所需要的組件了莫换。
2霞玄、自定義主題
按照配置主題的要求骤铃，自定義主題需要用到?less?變量覆蓋功能。
安裝less和less-loader
```$?yarn?add?less?less-loader```
配置webpack
復(fù)制代碼
```/*?config-overrides.js?*/
-?const?{?override,?fixBabelImports?}?=?require('customize-cra');
+?const?{?override,?fixBabelImports,?addLessLoader?}?=?require('customize-cra');
module.exports?=?override(
??fixBabelImports('import',?{
????libraryName:?'antd',
????libraryDirectory:?'es',
-???style:?'css',
+???style:?true,
??}),
+?addLessLoader({
+???javascriptEnabled:?true,
+???modifyVars:?{?'@primary-color':?'#1DA57A'?},
+?}),
);```
復(fù)制代碼
這里利用了less-loader的modifyVars來進(jìn)行主題配置坷剧。當(dāng)然這里的modifyVars的值也可以是一個(gè)theme文件惰爬。
3、打包后我們會發(fā)現(xiàn)靜態(tài)文件夾中會有很多的css和js的map文件惫企，那么我們該怎么關(guān)閉sourcemap呢撕瞧？
復(fù)制代碼
```/*?config-overrides.js?*/
const?{?override,?fixBabelImports,?addLessLoader?}?=?require("customize-cra");
+?process.env.GENERATE_SOURCEMAP?=?"false";
module.exports?=?override(
??fixBabelImports("import",?{
????libraryName:?'antd',
????libraryDirectory:?"es",
????style:?true,
??}),
??addLessLoader({
????javascriptEnabled:?true,
????modifyVars:?{?'@primary-color':?'#1DA57A'?},
??})
);```
復(fù)制代碼
ok，再次執(zhí)行```npm?run?build```便不會產(chǎn)生map文件了狞尔。
還看到一種解決的方式如下丛版，
復(fù)制代碼
```const?rewiredMap?=?()?=>?config?=>?{
????config.devtool?=?config.mode?===?'development'???'cheap-module-source-map'?:?false;
????return?config;
};
module.exports?=?override(
????//?關(guān)閉mapSource
????rewiredMap()
);```
復(fù)制代碼
參考地址：https://segmentfault.com/q/1010000018123194
4、支持裝飾器
```const?{?override,?addDecoratorsLegacy?}?=?require("customize-cra");
module.exports?=?override(
????addDecoratorsLegacy()
);```
5偏序、最后我們來說說前端本地proxy的配置
開發(fā)中常見的問題就是跨域页畦。那么我們前端慣用的方式就是給本地webpack啟動(dòng)的node服務(wù)設(shè)置代理。
那么具體到使用了新版的cra后研儒，我們該怎么辦呢豫缨？
很簡單，在src目錄下新建文件setupProxy.js（注意文件名一定要是這個(gè)名字端朵，不要問什么好芭，cra現(xiàn)在廢棄了proxy對象配置的方式，將其作為單獨(dú)模塊冲呢。解析就是按?src/setupProxy.js這個(gè)路徑）
安裝http代理相關(guān)包http-proxy-middleware
```$?yarn?add?http-proxy-middleware?-D```
配置如下舍败，
復(fù)制代碼
```const?proxy?=?require('http-proxy-middleware')
module.exports?=?function(app)?{
??app.use(
????proxy('/api',?{
??????target:?'http://xx.xx.xx.xx:8000/',
??????changeOrigin:?true,
??????pathRewrite:?{
????????'^/api':?''
??????}
????})
??)
}```
復(fù)制代碼
好了，現(xiàn)在你就可以愉快的訪問接口了~
關(guān)于更多的customize-cra配置碗硬，大家可以自行查看文檔瓤湘。https://github.com/arackaf/customize-cra
