本文講的全部知識點，都是和webpack相關(guān)的。如果你之前有疑問，那本文一定能幫你搞清楚。

問題來源一般是類似下面代碼（webpack.json中）：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.dev.js"
  },

代碼中出現(xiàn)的：cross-env、NODE_ENV。還有webpack.config.js中設(shè)置的mode、DefinePlugin。

環(huán)境版本（如果是低版本下面也會提及）：

• webpack < v4
• webpack-dev-server < v4
• cross-env < v5

編譯環(huán)境和運行環(huán)境

在講下面之前，我們必須清楚什么是編譯環(huán)境，什么是運行環(huán)境？

• 編譯環(huán)境（node環(huán)境）

我們在終端執(zhí)行：npm run dev 或 npm run start 或打包 npm run build 都是在編譯環(huán)境，也就是node環(huán)境。所以webpack的配置文件 webpack.config.js 和 webpack.dev.js 和 webpack.production.js 是運行在編譯環(huán)境中的。

• 運行環(huán)境（瀏覽器環(huán)境）

我們寫的業(yè)務(wù)代碼等都是在瀏覽器中運行的，也就是打包之后我們的代碼還在的。

只有區(qū)分這兩個環(huán)境，才能理解下面不同配置方式，有時能讀取到，有時讀取不到的原因.

概念

mode

模式， webpack會根據(jù)mode的值做一些內(nèi)置優(yōu)化。

枚舉值：none, development 或 production（默認(rèn)）。 只能是這三個值中某一個。

配置方式：

• 方式一（推薦）

在webpack配置文件（webpack.config.js、webpack.develop.js、webpack.production.js）中設(shè)置：

module.exports = {
  mode: 'development'
};

• 方式二

package.json中，webpack的CLI命令參數(shù)：

webpack serve --mode=development

這兩種方式設(shè)置的mode值，只能在業(yè)務(wù)代碼（運行環(huán)境）中通過process.env.NODE_ENV讀取到；在編譯環(huán)境，webpack配置文件中是讀取不到的。

注意:

在 webpack 4+ 中,你不需要做任何設(shè)置（其實是webpack自動幫你把變量加到了DefinePlugin中）就可以在代碼中讀取process.env.NODE_ENV的值了。

但是在 webpack 3 及其更低版本中，你需要在webpack配置文件中使用 DefinePlugin設(shè)置成全局變量，才可以訪問得到：

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

NODE_ENV

上面我們設(shè)置mode，是在運行環(huán)境中使用；如果想在編譯環(huán)境（webpack配置文件中使用）就需要用到NODE_ENV了。

本質(zhì)就是給當(dāng)前Node進(jìn)程，設(shè)置一個環(huán)境變量。只有在當(dāng)前Node進(jìn)程中有效。

設(shè)置方式：

package.json中：

{
  "scripts": {
    "dev": "NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
  }
}

你如果是mac電腦執(zhí)行npm run dev是能正常運行的，但如果你是windows電腦，會報錯：

'NODE_ENV' 不是內(nèi)部或外部命令，也不是可運行的程序或批處理文件。

是的，在windows里面需要修改命令為：

{
  "scripts": {
    "dev": "set NODE_ENV=development && webpack-dev-server --config ./config/webpack.config.dev.js"
  }
}

要解決跨環(huán)境問題，就要用到下面的cross-env了,我們一會在講，還是先回來。

設(shè)置了NODE_ENV=development后，在哪使用，如何使用呢？

答案：只能在編譯環(huán)境（webpack的配置文件webpack.config.js等）中使用?？梢酝ㄟ^**process.env.NODE_ENV讀取。**在業(yè)務(wù)代碼中是無法讀取的。

cross-env

為解決跨環(huán)境問題。

安裝：

npm install cross-env@5

修改package.json中命令：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
  }
}

這樣在mac和windows中就都可以執(zhí)行npm run dev了。

DefinePlugin

上面在講mode時已經(jīng)提到了DefinePlugin ，它主要用來定義一些全局變量，并會在 編譯時 將你代碼中的全局變量替換為具體值。這在需要根據(jù)開發(fā)模式與生產(chǎn)模式進(jìn)行不同的操作時，非常有用。

new webpack.DefinePlugin({
  // 定義...
});

使用

傳遞給 DefinePlugin 的每個鍵都是一個標(biāo)識符或多個以 . 連接的標(biāo)識符。

• 如果該值為字符串，它將被作為代碼片段來使用。
• 如果該值不是字符串，則將被轉(zhuǎn)換成字符串（包括函數(shù)方法）。
• 如果值是一個對象，則它所有的鍵將使用相同方法定義。
• 如果鍵添加 typeof 作為前綴，它會被定義為 typeof 調(diào)用。

這些值將內(nèi)聯(lián)到代碼中，從而允許通過代碼壓縮來刪除冗余的條件判斷。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});

提示:

請注意，由于本插件會直接替換文本，因此提供的值必須在字符串本身中再包含一個 實際的引號 。通常，可以使用類似 '"production"' 這樣的替換引號，或者直接用 JSON.stringify('production')。

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

未經(jīng) webpack 壓縮過的代碼：

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

經(jīng)過壓縮后：

console.log('Production log');

cross-env + DefinePlugin

確切的講，使用cross-env可以定義任意Node全局環(huán)境變量，例如package.json中：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development PUBLIC_PATH=/ui webpack-dev-server --config webpack.dev.config.js"
  }
}

我們這里又新增了一個全局變量PUBLIC_PATH，用來設(shè)置URL基礎(chǔ)路徑。

在編譯環(huán)境（webpack.config.js）中，可以直接使用process.env.PUBLIC_PATH獲取。

并可以通過添加到DefinePlugin,在代碼中使用

new webpack.DefinePlugin({
  PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH),
});

定義之后就可以在代碼中使用了：文章來源地址http://www.zghlxwxcb.cn/news/detail-860100.html

const url = PUBLIC_PATH + '/views'
console.log(url); // =>'/ui/views'

總結(jié)

1. mode是設(shè)置執(zhí)行模式，webpack4會自動將mode的值通過DefinePlugin設(shè)置為全局變量，業(yè)務(wù)代碼中可以使用process.env.NODE_ENV讀取值。
2. NODE_ENV是設(shè)置Node環(huán)境變量，在webpack.config.js、webpack.dev.js等文件中通過process.env.NODE_ENV讀取值。
3. cross-env是用來解決跨環(huán)境的。
4. DefinePlugin用來設(shè)置全局變量，在業(yè)務(wù)代碼中通過process.env.xxx讀取值。

到了這里，關(guān)于webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！