react-app-reqired 使用方法

導語：項目技術架構

react+antd-mobile

,先期按照官網配置

antd-mobile

按需加載，使用的是

react-app-reqired

，由于版本更新，最新版的

react-app-reqired

不能更細緻的去自定義

webpack

配置。當然了，我們可以不使用這個，直接暴露出

webpack

的配置檔案，那這樣會生成一大堆檔案。

config-overrides.js

核心的就是傳回一個函數，函數内的參數就是

webpack

的配置，為了更清晰的修改,引入

webpack-merge

子產品

npm install webpack --save-dev

安裝

代碼如下：

const merge = require('webpack-merge')
const webpacks = {
    output: {
        path: resolveApp('dist') // 修改打包輸出檔案夾名稱
    },
    devServer: { // 配置本地開發代理
        proxy: { 
            '/proxy': {
                "target": "https://www.justfun.fun/proxy/",
                // "target": "https://ieg-api.justfun.live",
                "pathRewrite": {
                    "^/proxy": ""
                },
                "changeOrigin": true
            }
        }
    },
    module: {
        rules: [
            {
                test : /\.js$/,   
                loader: "babel-loader", // 使用babel-loader來配置antd-mobile按需加載
                // query: {
                //     babelrc: false // 設定query babelrc:true 則會讀取package.json裡的配置檔案
                // },
                options: {
                    "plugins": [
                        [
                            "import", {
                                "libraryName": "antd-mobile",
                                "style": "css"
                            }
                        ]
                    ]
                }
            }, {
                test: /.(js|jsx)$/,  // 配置eslint校驗，相當于useEslintRc()
                enforce: 'pre',
                loader: 'eslint-loader',
                include: [path.resolve(__dirname, 'src')]
            }
        ]
    }
}
module.exports = function override(config, env) {
    return merge(config, webpacks)
}