webpack进阶--01--环境变量的设置

环境变量的设置

在用webpack作为打包工具的项目中，环境变量共有三种：

1. node运行时的环境变量
2. webpack配置对象的环境变量
3. js运行时的环境变量

node运行时的环境变量

在node环境中，通过process.env可以获取node的全局环境信息

在windows系统中，可以通过执行以下命令设置：

set NODE_ENV=dev

在linux系统中，可以通过执行以下命令设置：

export NODE_ENV=dev

所以，我们可以在项目的package.json中设置：

"scripts": {
  "start-win": "set NODE_ENV=dev && node app.js",
  "start-unix": "export NODE_ENV=dev && node app.js",
 }

但这样肯定不是我们想要的，能不能统一一条命令？

方法是安装cross-env

npm i -D cross-env

再在package.json中设置

"scripts": {
  "start": "cross-env NODE_ENV=dev && node app.js",
 }

这时就可以在所有系统中使用同一命令了。

执行命令之后，就可以在node代码中获取了

console.log(process.env.NODE_ENV) // dev

NODE_ENV只是笔者随意设置的环境变量名称，你也可以随意设置环境变量名称

webpack配置对象的环境变量

webpack配置对象的环境变量是通过webpack命令行来设置的。

从webpack4开始，webpack将webpack的命令行抽离成一个单独的npm包：webpack-cli，所以，如果要使用webpack命令行传参需要先安装webpack-cli。

npm i -D webpack-cli

通过webpack命令行传参的方式，webpack配置对象必须通过函数的方式导出。

命令行

webpack --env.NODE_ENV=local --env.production --progress

如果设置 env 变量，却没有赋值，--env.production 默认将 --env.production 设置为 true*。还有其他可以使用的语法。

webpack.config.js

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
  console.log('Production: ', env.production) // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  }
}

js运行时的环境变量

js本身没有环境变量一说，只是我们通过webpack打包时传入到js中并设置为js的全局变量。

方法：

使用webpack自带的插件DefinePlugin

webpack.config.js

module.exports = env => {
  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV)
      })
    ]
  }
}

./src/index.js

console.log(process.env.NODE_ENV) // lacal