process.env.NODE_ENV和env在webpack中的使用

process.env.NODE_ENV

process對象是全局變量，它提供當前node.js的有關信息，以及控制當前node.js的有關進程。因為是全局變量，它對於node應用程序是始終可用的，無需require()。

NODE_ENV不是process.env對象上原有的屬性，它是我們自己添加上去的一個環境變量，用來確定當前所處的開發階段。

// package.json
"start": "NODE_ENV=production node build.js"
// set NODE_ENV=production node build.js  //windows　　

env

要在開發和生產構建之間，消除 webpack.config.js 的差異，你可能需要環境變量。

webpack 命令行環境配置中，通過設置 --env 可以使你根據需要，傳入盡可能多的環境變量。在 webpack.config.js 文件中可以訪問到這些環境變量。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常約定用於定義環境類型，查看這里）。

// package.json
"build": "NODE_ENV=dev webpack --env=dev --config ./webpack.config.js"　　

然而，你必須對 webpack 配置進行一處修改。通常，module.exports 指向配置對象。要使用 env 變量，你必須將 module.exports 轉換成一個函數：　　

// webpack.config.js
module.exports = env => {
  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')
    }
  }
}

　　　　

綜合使用

1.安裝cross-env兼容不同系統

npm i cross-env --save-dev　　

2.在package.json中scripts里定義NODE_ENV留作全局使用，定義env留作webpack配置文件中使用。

// package.json
  "scripts": {
    "build:dev": "cross-env NODE_ENV=dev webpack --env=dev --config ./webpack.config.js",
    "build:test": "cross-env NODE_ENV=test webpack --env=test --config ./webpack.config.js"
  },　　

3.在webpack配置文件中使用env，使用內置的DefinePlugin全局化process.env.NODE_ENV,與最外層的package.json保持同步。

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = env => {
  // 這里可以使用env了
  console.log(env)
  return {
    mode: 'production',
    entry: './index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    plugins:[
        new webpack.DefinePlugin({
            // 這里要JSON.stringify包裝下 
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
          })
    ]
  };
};　　

4.在全局代碼中可以使用process.env.NODE_ENV判斷環境了

// index.js
console.log(process.env.NODE_ENV)
if(process.env.NODE_ENV === 'dev'){
    console.log('this dev')
}else if (process.env.NODE_ENV === 'test'){
    console.log('test')
}