node+webpack构造打包 打测试/线上包

前言

前端通过构造工具打包是日常的工作内容，但因为环境的不一样测试/线上。通常都需要修改配置的。我就想只通过命令来传入一个变量，这样来区别打包的环境。

如何实现呢？

1.配置package.json

1.通过构造命令传入一个环境变量，如：

node scrupts/build.js uat //uat就为测试环境的变量

2.然后我把node命令，写到在package.json里面

那么我就可以通过

npn run build_uat //打包测试环境
npn run build_prod //打包线上环境

用npm命令来运行，简化我的代码输入。也方便团队间交流，通常会看package.json里面的命令的哦。

---

2.webpack.config.prod.js

我的build.js是把打包的配置信息写到webpack.config.prod.js里面。
因此这一步就是如何通过构造打包文件，把变量写到js里面。

首先我介绍如何读取文件，通过node process进程模块。
process模块，允许你获得或者修改当前node进程的设置，不想其他的模块，
process是一个全局进程(node主进程)，你可以直接通过process变量直接访问它。node下就有变量。

属性	介绍
process	对象提供一系列属性，用于返回系统信息。
process.pid	当前进程的进程号。
process.version	Node的版本，比如v0.10.18。
process.platform	当前系统平台，比如Linux。
process.title	默认值为“node”，可以自定义该值。
process.argv	当前进程的命令行参数数组。
process.env	指向当前shell的环境变量，比如process.env.HOME。
process.execPath	运行当前进程的可执行文件的绝对路径。
process.stdout	指向标准输出。
process.stdin	指向标准输入。
process.stderr	指向标准错误。

而我重点介绍process.argv。我们刚刚在命令提示台里面输入:

node scrupts/build.js uat 
//如上面命令

node[]scrupts/build.js[]uat
//通过把空格给区分开导出成一个数组
[node,scrupts/build.js,uat]

那么我要获取第三个，就通过命令process.argv[2] == uat;

那么我在webpack.config.prod.js里面写入代码，获取环境变量：

然后通过new webpack.DefinePlugin(definitions)，定义一个process.env.MY_ENV的全局函数，写入我的uat到里面。

new webpack.DefinePlugin(definitions)
允许你创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。比如,你可能会用一个全局的常量来决定 log 在开发模式触发而不是发布模式。这仅仅是 DefinePlugin 提供的便利的一个场景。

---

3.js获取环境变量

最后通过在里面js,写入process.env.MY_ENV，来做区分。

结语

通过对process进程和webpack.DefinePlugin学习。实现通过命令来测试/线上分开打包。其实很简单，别给自己设置一到墙，手动来配置一下，重复的手动劳动该走自动化来解决。