react 使用rewired_使用react-app-rewired和customize-cra 个性化配置

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")

})

)

);

到这里，配置就完成了，我在做less 配置的时候碰到过如下问题

通过报错判断应该是less-loader 版本不对，于是将less-loader 降级  yarn install less-loader@5.0.0 问题解决。