create-react-app覆蓋修改默認(rèn)webpack配置

• 前言

CRA即create-react-app已經(jīng)有一套完善的webpack配置，但是在有些情況下我們需要修改下webpack默認(rèn)配置，如修改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 插件

• 書寫配置

在項(xiàng)目根目錄創(chuàng)建一個 config-overrides.js 用于修改默認(rèn)配置

// 修改webpack默認(rèn)配置，目的：按需引入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  // 生產(chǎn)環(huán)境關(guān)閉sourcemap關(guān)閉
   return config
 }


 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
   rewiredMap()
 );

文中代碼為配置了按需引入andesign及修改soucemap方案, 既可以使用customize-cra提供的各種api來修改配置，也可以手動寫方法如文中的rewiredMap來修改默認(rèn)配置（rewiredMap內(nèi)config參數(shù)為webpack默認(rèn)配置，一般覆蓋即可）。

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

如果這篇文章幫到了您，點(diǎn)個贊唄??????????????????????????
轉(zhuǎn)發(fā)請注明出處