create-react-app覆盖修改默认webpack配置

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

如果这篇文章帮到了您，点个赞呗
转发请注明出处