creat-react-app 初始化項目后，我們對項目的啟動是通過 react-scripts 實現的，項目開發過程中，如果需要引入對less 支持，和高階組件對裝飾器的使用，我們需要在webpack 中添加對此功能的支持，我們需要custom-cra 這個包，https://www.npmjs.com/package/customize-cra#documentation
看官方介紹，意思就是這個包擴展了create-react-app 功能 custom-cra 依賴 react-app-rewired 那我們首先要安裝 這兩個包
yarn add custom-cra react-app-rewired -dev
使用方法官網也有詳細的介紹，就是在package.json 同級目錄下新建 config-overides.js 進行配置，下面是官網的demo
const {
override,
addDecoratorsLegacy,
disableEsLint,
addBundleVisualizer,
addWebpackAlias,
adjustWorkbox
} = require(
"customize-cra"
);
const path = require(
"path"
);
module.exports = override(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
// disable eslint in webpack
disableEsLint(),
// add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
// add an alias for "ag-grid-react" imports
addWebpackAlias({
[
"ag-grid-react$"
]: path.resolve(__dirname,
"src/shared/agGridWrapper.js"
)
}),
// adjust the underlying workbox
adjustWorkbox(wb =>
Object.assign(wb, {
skipWaiting:
true
,
exclude: (wb.exclude || []).concat(
"index.html"
)
})
)
);
到這里，配置就完成了