使用react-app-rewired和customize-cra對預設webpack自定義配置

最近在學習react框架，之前一直都是用vue 開發，知道在vue 中知道如何配置一下相關的webpack 有助於開發，學react 過程中，我也在想這些該怎麼配置啊，所以就有這篇文章。

這篇文章主要是講 react-create-app 生成的項目利用 react-app-rewired 和 customize-cra 的配置

1. 首先我們 創建一個項目 myapp ,執行命令

npm create react-app myapp

2. 然後安裝 react-app-rewired 和 customize-cra 

npm install react-app-rewired customize-cra  --save-dev

3. 改寫package.json 的啟動命令

/* package.json */
原來的：
"scripts": {
  "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"

}

修改後的：
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
}

4. 修改後直接執行npm start 啟動項目，你會發現報錯，沒關係，報錯就解決，你會發現報錯信息中有：

The “injectBabelPlugin” helper has been deprecated as of v2.0
翻譯：
自2.0版起，“injectbabelplugin”助手已被棄用

react-app-rewired的新版本刪除了injectBabelPlugin，這些方法被移動到一個名為’customize-cra’的新包中

 解決方案就是降低版本，執行兩個命令：

npm uninstall react-app-rewired  //刪原來的
npm install react-app-rewired@2.0.2 --save-dev  //安裝指定底版本的

執行 npm start 命令後，項目就可以跑起來了

5. 項目的根目錄會多一個配置文件config-overrides.js （如果沒有，手動新建）

   接下來做一些webpage的配置，比如插件配置，路徑別名，ui 插件按需載入，修改、添加loader

直接上完整代碼，帶註釋

const { override, fixBabelImports ,addWebpackExternals ,addWebpackAlias ,addLessLoader } = require('customize-cra');
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const myPlugin = [
  new UglifyJsPlugin(
    {
      uglifyOptions: {
        warnings: false,
        compress: {
          drop_debugger: true,
          drop_console: true
        }
      }
    }
  )
]

module.exports = override( 
  fixBabelImports('import', { //配置按需載入
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addWebpackExternals({ //不做打包處理配置，如直接以cdn引入的
    echarts: "window.echarts",
    // highcharts:"window.highcharts"
  }),
  addWebpackAlias({ //路徑別名
    '@': path.resolve(__dirname, 'src'),
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#1DA57A'
    }
  }),
  (config)=>{ //暴露webpack的配置 config ,evn
    // 去掉打包生產map 文件
    // config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    if(process.env.NODE_ENV==="production") config.devtool=false;
    if(process.env.NODE_ENV!=="development") config.plugins = [...config.plugins,...myPlugin]
    //1.修改、添加loader 配置 :
    // 所有的loaders規則是在config.module.rules(數組)的第二項 
    // 即：config.module.rules[2].oneof  (如果不是，具體可以列印 一下是第幾項目)
    // 修改 sass 配置 ，規則 loader 在第五項(具體看配置)
    const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
    loaders[5].use.push({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, 'src/asset/base.scss')//全局引入公共的scss 文件
      }
  })

    
    return config
  }

);