react-app-reqired 使用方法

简介: 导语:项目技术框架react+antd-mobile,先期按照官网配置antd-mobile按需加载,使用的是react-app-reqired,由于版本升级,最新版的react-app-reqired不能更细致的去自定义webpack配置。

导语:项目技术框架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)
}
相关文章
|
6月前
|
前端开发 JavaScript API
React团队回应用Vite替换Create React App的建议
React团队回应用Vite替换Create React App的建议
151 0
|
2月前
|
JavaScript 前端开发 开发者
React 的正确使用方法:ref 篇
你真的用对了 useRef 吗?在与 TypeScript 一起使用、以及撰写组件库的情况下,你的写法能够避开以下所有场景的坑吗?
|
6月前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
6月前
|
安全 定位技术
ENVI软件App Store插件工具的下载、安装与使用方法
ENVI软件App Store插件工具的下载、安装与使用方法
343 1
|
前端开发 容器
react map使用方法详解
react map使用方法详解
769 0
|
前端开发
react axios 的使用方法
react axios 的使用方法
|
前端开发
从0开始,手把手教你使用React开发答题App(下)
从0开始,手把手教你使用React开发答题App(下)
168 0
|
JavaScript 前端开发
Taro+React Redux最简单最简单的使用方法
React Redux最简单最简单的使用方法
|
存储 缓存 前端开发
Create React App 被 React 官方抛弃了吗?
在 Beta 版本的 React 新文档中,是有在显眼的位置提到推荐使用 Vite 启动的,而正式版文档则替换成了 React 社区的几个知名框架:
|
JSON 前端开发 JavaScript
从0开始,手把手教你使用React开发答题App(上)
从0开始,手把手教你使用React开发答题App
153 0