11. webpack 区分环境

区分环境

1.可以生产和开发环境写两个配置文件，然后在执行运行不同的webpack文件

2.仍然可以使用一个文件，webpack允许配置不仅可以是一个对象，还可以是一个函数，然后传入函数的参数去区分

module.exports = env => {
    return {
        //配置内容
    }
}

在开始构建时，webpack如果发现配置是一个函数，会调用该函数，将函数返回的对象作为配置内容，因此，开发者可以根据不同的环境返回不同的对象

在调用webpack函数时，webpack会向函数传入一个参数env，该参数的值来自于webpack命令中给env指定的值，例如

就是简单来说执行命令的时候可以传递一个参数过来，然后根据参数去判断是什么环境。

npx webpack --env abc # env: "abc"

npx webpack --env.abc # env: {abc:true}
npx webpack --env.abc=1  # env： {abc:1}
npx webpack --env.abc=1 --env.bcd=2 # env: {abc:1, bcd:2}

这样一来，我们就可以在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果。

实际的举例

//基本配置
var baseConfig = require("./webpack.base")
// 开发环境的配置
var devConfig = require("./webpack.dev")
// 生产环境的配置
var proConfig = require("./webpack.pro")

module.exports = function (env) {
    if (env && env.prod) {
        return {
            ...baseConfig,
            ...proConfig
        }
    }
    else {
        return {
            ...baseConfig,
            ...devConfig
        }
    }
}