webpack学习第十七步—— 打包的环境变量

修改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"