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