修改webpack的config文件
-
之前是使用
webpack.dev.js
和webpack.prod.js
去分别mergewebpack.common.js
,现在我们统一使用webpack.common.js
,通过环境变量来决定去mergewebpack.dev.js
还是webpack.prod.js
-
修改webpack.dev.js
// 原本是module.exports = merge(commonConfig,devConfig),现在直接导出devConfig,不需要去merge CommonConfig
module.exports = devConfig
- 同理修改webpack.prod.js
// 原本是module.exports = merge(commonConfig,prodConfig),现在直接导出prodConfig,不需要去merge CommonConfig
module.exports = prodConfig
- 将merge操作放置
webpack.common.js
中
// 引入merge、devConfig和prodConfig
const merge = require('webpack-merge')
const devConfig = require('./webpack.dev')
const prodConfig = require('./webpack.prod')
const commonConfig = {
// 原本写的内容
}
// 导出时增加环境变量判断,根据环境变量,去merge不同的webpack config文件
module.exports = (env) => {
if(env && env.production) {
return merge(commonConfig,prodConfig)
} else return merge(commonConfig,devConfig)
}
修改package.json的打包命令
"scripts": {
"dev": "webpack --config ./config/webpack.common.js",
"start": "webpack-dev-server --config ./config/webpack.common.js",
// 使用环境变量
"build": "webpack --env.production --config ./config/webpack.common.js"
}
另一种写法
module.exports = (production) => {
if(production) {
return merge(commonConfig,prodConfig)
} else return merge(commonConfig,devConfig)
}
- 此时打包命令可以修改如下
"build": "webpack --env production --config ./config/webpack.common.js"
自定义环境变量
module.exports = (env) => {
if(env && env.production === 'abc') {
return merge(commonConfig,prodConfig)
} else return merge(commonConfig,devConfig)
}
"build": "webpack --env.production=abc --config ./config/webpack.common.js"
网友评论