create-react-app 腳手架默認是用react-scripts 來執(zhí)行package.json中的scripts，webpack的配置文件被封裝起來，不能夠靈活的更改webpack的配置，所以可以使用react-app-rewired和customize-cra來更改。
## 安裝依賴? ? npm install customize-cra react-app-rewired --save-dev
修改項目的?package.json
{
????"scripts":
????????????{
????????????????"start":"react-app-rewired start",
????????????????"build":"react-app-rewired build",
????????????????"test":"react-app-rewired test --env=jsdom"
????????????}
}
原來用?react-scripts?命令啟動項目，現(xiàn)在改成 react-app-rewired 命令。
接著在項目根目錄新建文件，命名為?config-overrides.js，也不一定要在根目錄，如果要規(guī)范化開發(fā)，可以在?package.json?指定某個路徑下的文件。
"config-overrides-path": "node_modules/some-preconfigured-rewire"
純?react-app-rewired?的方式自定義配置，參考?Extended Configuration Options?文檔。
這次我們使用?customize-cra?協(xié)助自定義，參考?Using the plugins?文檔。
// 基本格式const{ override } =require('customize-cra');module.exports = override();
使用 Less
## 安裝依賴? ? npm i --save less less-loader
修改配置文件
const? { override, addLessLoader } = require('customize-cra');
module.exports = override(
????addLessLoader()
);??
ps:? 不同的更改配置可以在override中以不同參數(shù)的形式。
.less?文件以及能被 less-loader 解析，并且?.module.less?文件將會使用 CSS Modules。自定義 CSS Modules 的 localIdentName 配置，修改?addLessLoader({ localIdentName: '[local]--[hash:base64:5]' })?即可。
antd
假設我們要使用 antd，參考?高級配置?文檔。
npm i --save-dev babel-plugin-import
npm i --save antd
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
????????fixBabelImports('import', {
????????????libraryName: 'antd',
????????????libraryDirectory: 'es',
????????????style: true,
?????????}),
????????addLessLoader({
????????????javascriptEnabled: true,
????????????modifyVars: { '@primary-color': '#1DA57A' },
????????????localIdentName: '[local]--[hash:base64:5]' // 自定義 CSS Modules 的 localIdentName
?????????}),
);
decorators
在 create-react-app 的?Can I Use Decorators?文檔中說，當前它并不是一個文檔的規(guī)范，默認不推薦使用，如果要使用，需要自己手動開啟。
npm i --save-dev @babel/plugin-proposal-decorators
const { override, fixBabelImports, addLessLoader, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
????addDecoratorsLegacy(),
????fixBabelImports('import', {???
? ? ? ? libraryName: 'antd',
????????libraryDirectory: 'es',
????????style: true,
????}),
????addLessLoader({
????????javascriptEnabled: true,
????????modifyVars: { '@primary-color': '#1DA57A' },
????????localIdentName: '[local]--[hash:base64:5]' // 自定義 CSS Modules 的 localIdentName
????}),
);
添加別名
const { override, fixBabelImports, addLessLoader, addDecoratorsLegacy, addWebpackAlias， addBabelPlugins } = require('customize-cra');
module.exports = override(
????????addDecoratorsLegacy(),
????????addWebpackAlias({|["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
?????}),
?????fixBabelImports('import', {
????????libraryName: 'antd',
????????libraryDirectory: 'es',
????????style: true,? ?? //`style:?true`?會加載?less?文件? ? ?//`style:?css`?會加載?css?文件
????}),? ?
????addLessLoader({
????????javascriptEnabled: true,
? ? ? ? modifyVars: { '@primary-color': '#1DA57A' },
????????localIdentName: '[local]--[hash:base64:5]' // 自定義 CSS Modules 的 localIdentName
?????}),
? ??addBabelPlugins(
? ???????['syntax-dynamic-import', { legacy: true }],? ?//?語法動態(tài)導入， 使用場景：
? ???????????() => import(URL), webpack2官網(wǎng)推薦使用,屬于es7范疇,需要配合babel的syntax-dynamic-? mport插件使用。 ? 作用同 resolve => require([URL], resolve)
? ???),
);
一些簡單的配置已經(jīng)好了。
PS:???上面利用的fixBabelImports方法可以?customize-cra中的?addBabelPlugins實現(xiàn)
? ? ? （1）addBabelPlugins?('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }),?
? ? ? ?（2）也可以用?customize-cra中的useBabelRc方法實現(xiàn)，利用.babelrc中的配置
附文：http://m.itdecent.cn/p/87efabb6a333? ?babel-plugin-import的配置項
