导语:项目技术框架
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)
}