【webpack核心】- 14、env区分环境

有些时候，我们需要在webpack.config中 针对生产环境和开发环境分别书写webpack配置

---

方法1：写两个配置文件 + 基础配置

简单粗暴的，分别写两个配置文件，webpack.dev.js 和 webpack.prod.js，然后在package.json里配置2脚本命令,指定配置文件

    "scripts": {
        "dev": "webpack --config webpack.dev.js",
        "prod": "webpack --config webpack.prod.js"
    },

不同的配置写在各自的配置文件里，相同的配置再写另一个配置文件webpack.base.js,然后在各自的配置文件 导出配置之前，用对象混合进行混合

方法2: 在webpack.config.js里导出一个函数

为了更好的适应这种要求，webpack允许配置导出不仅可以是一个对象，还可以是一个函数，这样无论生产环境，还是开发环境，都可以在webpack.config.js里配置，就只写这一个配置文件

//webpack.config.js
module.exports = function(env){   //导出一个函数
    return {     //把返回的这个对象作为配置内容
        //配置内容
        mode:'development'
    }
}

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

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

module.exports = function(env){   //导出一个函数
	console.log(env)  //env的值需要在命令中传入，不传的化 就是undefined
    return {     //把返回的这个对象作为配置内容
        mode:'development'
    }
}

命令行里传值如下：

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}

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

---

总结

//package.json
    "scripts": {
        "dev": "webpack",
        "prod": "webpack --env.prod"    //命令行里传入env的值，这个prod是自定义的
    },

//webpack.config.js
module.exports = function (env) {
    if (env && env.prod) {   //如果有env参数，且是prod
        return {   //返回生产的配置
		    mode: "production",
		    devtool: "none"
        }
        //return require("./webpack.prod")     //也可以这样写，放在一个单独文件，然后引入
    }
    else {
        return {   //否则返回开发的配置
		    mode: "development",
		    devtool: "source-map"
        }
    }
}

也可以将开发，生产 和公用的配置进行分割：

//webpack.base.js
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "scripts/[name]-[hash:5].js"
    }
}

//webpack.dev.js
module.exports = {
    mode: "development",
    devtool: "source-map"
}

//webpack.prod.js
module.exports = {
    mode: "production",
    devtool: "none"
}

上面3个文件只是，自己拆分的代码，并不是给webpak看的，下面的webpack.config.js 才是给webpack看的

//webpack.config.js
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
        }
    }
}