使用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 問題解決。