Webpack 环境变量

环境变量，指的是设定程序运行环境的一些参数。这里的程序也包括操作系统，操作系统本质是一个大型程序。

在我们使用Webpack的过程中，会遇到两种环境变量。

• Node.js环境里的环境变量
• Webpack打包模块里的环境变量

下面我们分别来讲解

一、 Node.js环境里的环境变量

Node.js环境里的环境变量，指的是用Node.js执行JavaScript代码时可以取到的环境变量，它都存放在process.env模块。

我们先来获取一下Node.js的环境变量。在任意目录新建一个test.js文件，在里面输入console.log(process.env) 后保存，然后在命令行控制台使用node test.js执行该脚本，就可以看到当前Node.js的环境变量。

这张图片展示了当前Node.js环境变量的一部分。

如果我们想要自定义一个Node.js环境变量，在Windows操作系统，可以通过set命令。我们在命令行控制台输入set MY_ENV=dev后回车，这个时候不要退出当前的命令行窗口，接着在命令行控制台使用node test.js执行该脚本，观察当前Node.js的环境变量，可以看到多了一个MY_ENV：dev的键值对，这个就是我们设置的环境变量。

如果是Linux系统，可以通过export命令设置环境变量：export MY_ENV=dev。

在实际开发中，我们一般需要设置跨操作系统的环境变量。通常，在npm的package.json中，我们可以通过跨操作系统的 "cross-env MY_ENV=dev"这种方式进行环境变量的设置。cross-env是一个npm包，安装完成后就可以使用它了。

  npm install --save-dev cross-env@7.0.3   

现在新建一个项目，文件目录名取为webpack6-1

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack6-1例子

npm init -y初始化项目后，我们在package.json里增加如下的脚本命令。

  "scripts": {
     "build": "cross-env MY_ENV=dev webpack"
  }

这样我们在执行npm run build的时候，会先执行cross-env MY_ENV=dev设置系统的环境变量，紧接着执行webpack进行打包，这个打包会寻找默认Webpack配置文件。

我们对Webpack的配置文件代码如下，a.js里随便写var myAge = 18即可。

var path = require('path');

console.log('start');
console.log(process.env.MY_ENV);
console.log('end');

module.exports = {
  entry: './a.js',
  output: {
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js'
  },
  mode: 'none'
};

现在我们执行'npm run build'，观察命令行控制台，可以看到控制台打印出了该环境变量值。

MY_ENV=dev是我们随便起的一个环境变量，通常我们会采用业界默认的环境变量。本地开发环境采用"cross-env NODE_ENV=development"，生产环境采用"cross-env NODE_ENV=production"。

二、 Webpack打包模块里的环境变量

模块里的环境变量，指的是我们用Webpack打包的文件里的环境变量，前面章节里我们被打包的a.js和b.js都是这类模块。

在实际开发中，我们有时候需要在业务逻辑代码里根据此代码是运行在本地开发环境还是线上生产环境做区分，这个时候就需要在业务模块文件里注入环境变量。

我们通过DefinePlugin插件来设置打包模块里的环境变量，它是Webpack自带的一个插件，使用方法很简单。

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack6-2例子

  var webpack = require('webpack');
  ......

  plugins: [
    new webpack.DefinePlugin({
      IS_OLD: true,
      MY_ENV: JSON.stringify('dev'),
      NAME: "'Jack'",
    }),
  ],

这样，我们就在被打包的模块里注入了三个环境变量：IS_OLD、MY_ENV和NAME。我们可以在a.js里取到这个三个变量。

a.js

  console.log(IS_OLD);
  console.log(MY_ENV);
  console.log(NAME);

执行npx webpack打包后，在浏览器里打开引用了bundle.js的HTML文件，我们发现控制台正常输出了true、dev和Jack。

通常我们也会采用业界通用的环境变量进行设置，在开发环境的Webpack配置文件里，我们设置为NODE_ENV:JSON.stringify('development')，生产环境的Webpack配置文件设置为NODE_ENV:JSON.stringify('production')。

需要注意的是，我们在设置一个字符串值的时候，需要在外层再包裹一层引号，或者使用JSON.stringify()方法。如果不进行一层额外包裹，Webpack会把该字符串当成一个变量来处理。

小结

本节主要讲解了Webpack使用过程中会遇到的两种环境变量，Node.js环境里的环境变量以及Webpack打包模块里的环境变量。这二者的区别，简单概述就是，Node.js环境里的环境变量是用Node.js执行JS脚本时的变量；Webpack打包模块里的环境变量是被打包文件里可以取到的变量。