create-react-app覆盖修改默认webpack配置
- 前言
CRA即create-react-app已经有一套完善的webpack配置，但是在有些情况下我们需要修改下webpack默认配置，如修改outputPath、sourcemap方案等，但由于
eject是不可逆的，所以我选择其他方案 ，也是antDesign所用到的react-app-rewired.
- 安装
npm i react-app-rewired customize-cra babel-plugin-import
customize-cra用来获得一组 CRA 2.0兼容的 rewirers
babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件
- 书写配置
在项目根目录创建一个 config-overrides.js 用于修改默认配置
// 修改webpack默认配置，目的：按需引入antdesign
// 、、customize-cra包含很多api
const { override, fixBabelImports } = require('customize-cra');
const rewiredMap = () => config => {
// config为所有的webpack配置
config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false // 生产环境关闭sourcemap关闭
return config
}
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
rewiredMap()
);
文中代码为配置了按需引入andesign及修改soucemap方案, 既可以使用customize-cra提供的各种api来修改配置，也可以手动写方法如文中的rewiredMap来修改默认配置（rewiredMap内config参数为webpack默认配置，一般覆盖即可）。
customize-cra github地址https://github.com/timarney/react-app-rewired/blob/master/README_zh.md
react-app-rewired github地址https://github.com/timarney/react-app-rewired/blob/master/README_zh.md如果这篇文章帮到了您，点个赞呗🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾
转发请注明出处
