webpack打包过程中环境变量的使用

gogo.jpg

写在前面

通过前面的一些讲解，我们已经将webpack的基础和一些高级概念都讲解完毕了，后面我们将深入一些场景去研究webpack的打包过程和可能遇到的问题，还没有学习概念知识的同学可以翻阅前面的博客，在本篇中呢，我们再分享一个日常开发中很常用的知识点——环境变量，来介绍我们对于概念类知识的讲解

webpack打包过程中的环境变量

回顾之前的webpack配置文件，我们是通过webpack-merge这样的插件和在npm下运行不同的配置文件来实现不同环境的打包的，今天我们再介绍一种其他的方式来实现这种区分环境的方法，看之前的代码是这样的
webpack.dev.js

const {merge} = require('webpack-merge')
module.exports = merge(commonConfig, devConfig)

webpack.prod.js

const {merge} = require('webpack-merge')
module.exports = merge(commonConfig, prodConfig)

dev和prod都有着各自的配置，最终通过导出一个和common融合后的文件。
那么我们换一种方式就是可以在common中去分别融合dev和prod的配置，这样我们的npm指令只执行一个文件就可以了。
于是，我们将dev和prod中的merge代码去掉，统一将dev和prod中进行merge。就像下面这样的
webpack.common.js

const {merge} = require('webpack-merge')
const devConfig = require('./webpack.dev')
const prodConfig = require('./webpack.prod')
const commonConfig = {
// 这里是原common配置项
}
module.exports = env => {
    if (env && env.production) {
        return merge(commonConfig, prodConfig)
    } else {
        return merge(commonConfig, devConfig)
    }
}

通过上面的修改呢，我们的devConfig 和 prodConfig 都变成了单独的导出模块，不再是合并后的结果，而执行哪个配置，取决于common.js在导出时依据env和决定和哪个配置文件融合。那么，我们的env(全局变量)从哪里来呢？这就需要我们在打包的时候传入 ，

"build": "webpack --env.production --config ./build/webpack.common.js"

打包试试，照样能成功区分环境，但是经过这样的代码变更之后，我们就不用再通过不同的文件去生成代码，而是通过同一个文件去生成不同环境的代码。当然了，在传递环境变量的同时，我们也可以使用一些其他的形式，比如

"build": "webpack --env production --config ./build/webpack.common.js"

这样就可以直接在文件中判断production了，当然了也可以给他做一些赋值，我们还可以使用cross-env这样的插件注入环境变量，这都可以。

写在后面

本篇为大家介绍了另外一种区分环境做打包的方式，了解并讲解了webapck打包过程中全局变量的用法和作用。以后不管是见到那种配置形式，大家都要认知清楚就好了，其实在项目开发中用之前的分别配置的方式还是多一点。不过也会有一些脚手架工具之类的用到环境变量的形式，大家技多不压身哦！加油