Webpack設置環(huán)境變量的一些誤區(qū)詳解

更新時間：2019年12月19日 11:16:11 作者：秋天不落葉

這篇文章主要給大家介紹了關于Webpack設置環(huán)境變量的一些誤區(qū)，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Webpack具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

一、前言

日常的前端開發(fā)工作中，至少會有兩套構建環(huán)境
- 一套開發(fā)時使用，構建結果用于本地開發(fā)調試，不進行代碼壓縮、打印 debug 信息、包含 sourcemap 文件等
- 一套發(fā)布時使用，構建結果用于線上，即代碼都是壓縮過的、運行時不打印 debug 信息、靜態(tài)文件不包括 sourcemap 等
webpack 4.0 版本開始引入了 mode 的概念

選項	描述
development	會將 process.env.NODE_ENV 的值設為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin
production	會將 process.env.NODE_ENV 的值設為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

二、區(qū)分開發(fā)環(huán)境/生產環(huán)境的多種方式

2.1 使用命令行

2.1.1 寫法一

"scripts": {
 // 默認 mode 為 development
 "dev1": "webpack-dev-server",
 // 默認 mode 為 production，不過這樣寫，打包的時候會有警告
 "build1": "webpack",
}

以上 script 腳本，可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環(huán)境變量

但無法在 node 環(huán)境（webpack 配置文件中）下獲取當前的環(huán)境變量

// index.js 
function getEnv() {
 console.log(process.env.NODE_ENV);// development | production
}

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

console.log('NODE_ENV',process.env.NODE_ENV);// undefined

module.exports = {
 	entry:'./src/index.js',
  output: {
   filename: 'js/[name].js'
  },
 		...
};

2.1.2 寫法二

"scripts": {
 "dev2": "webpack --mode=development",
 "build2": "webpack --mode=production",
}

和寫法一，是一樣的結果

2.1.3 寫法三

"scripts": {
 "dev3": "webpack-dev-server --env=development",
 "build3": "webpack --env=production",
}

以上 script 腳本，無法在任意模塊內通過 process.env.NODE_ENV 獲取當前的環(huán)境變量

但可以在 node 環(huán)境（webpack 配置文件中）下，通過函數獲取當前環(huán)境變量

// index.js 
function getEnv() {
 console.log(process.env.NODE_ENV);// undefined
}

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

console.log('NODE_ENV',process.env.NODE_ENV);// undefined

// 通過函數獲取當前環(huán)境變量
module.exports = (env,argv) => {
 console.log('env',env);// development | production
 return {
 	entry:'./src/index.js',
  output: {
   filename: 'js/[name].js'
  },
 		...
 }
};

2.2 使用 mode

// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// development | production
}

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

console.log('NODE_ENV',process.env.NODE_ENV);// undefined

module.exports = {
 	mode:'development',// development | production
 	entry:'./src/index.js',
    output: {
      filename: 'js/[name].js'
    },
  		...
};

和 2.1 中的寫法二，是一樣的結果

一個是在命令行中設置，一個是在 webpack 配置文件中設置

2.3 使用 webpack.DefinePlugin

首先得知道這個插件的作用：設置全局變量（并非掛載到 window 上），所有模塊都能讀取到該變量的值

// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// development
  console.log(NODE_ENV);// production
}

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

// 這里只是湊巧和環(huán)境變量同名了，所以才不會報錯
console.log('process.env.NODE_ENV',process.env.NODE_ENV);// undefined
console.log('NODE_ENV',NODE_ENV);// error ?。?！

module.exports = {
 	mode:'development',// development | production
 	entry:'./src/index.js',
    output: {
      filename: 'js/[name].js'
    },
 	plugins:[
      new webpack.DefinePlugin({
      	'process.env.NODE_ENV':JSON.stringify('development'),
        'NODE_ENV':JSON.stringify('production'),
    }),
  ],
  		...
};

可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環(huán)境變量

但無法在 node 環(huán)境（webpack 配置文件中）下獲取當前的環(huán)境變量

2.4 使用 cross-env 插件

原先我一直以為這個插件，可以用來設置所有環(huán)境（瀏覽器環(huán)境、node 環(huán)境）下的變量。經過測試發(fā)現(xiàn)，只能設置node 環(huán)境下的變量 —— NODE_ENV

2.4.1 寫法一

"scripts": {
 	"dev1": "cross-env NODE_ENV='production' webpack-dev-server",
    "build1": "cross-env NODE_ENV='development' webpack",
}

以上 script 腳本，可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環(huán)境變量

可以在 node 環(huán)境（webpack 配置文件中）下，獲取當前環(huán)境變量

但是會有一個問題：瀏覽器環(huán)境和 node 環(huán)境下獲取到的值是不一樣的

// ?。。。。?！
// npm run build1 
// ?。。。。?！

// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// production
}

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

console.log('process.env.NODE_ENV',process.env.NODE_ENV);// development

module.exports = {
 	entry:'./src/index.js',
    output: {
      filename: 'js/[name].js'
    },
  		...
};

2.4.2 寫法二

"scripts": {
 "dev2": "cross-env NODE_ENV='development' --mode development",
 "build2": "cross-env NODE_ENV='production' --mode production",
}

以上 script 腳本，可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環(huán)境變量

可以在 node 環(huán)境（webpack 配置文件中）下，獲取當前環(huán)境變量

所以在能瀏覽器環(huán)境下讀取到環(huán)境變量的值，靠的是 mode ，在 node 環(huán)境下讀取到環(huán)境變量的值，靠的是 cross-env

// ?。。。。?！
// npm run build2 
// ！?。。。?！

// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// production
}

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

console.log('process.env.NODE_ENV',process.env.NODE_ENV);// production

module.exports = {
 	entry:'./src/index.js',
    output: {
      filename: 'js/[name].js'
    },
  		...
};

三、誤區(qū)

經常在一些群里看到這個問題： cross-env 和 webpack.DefinePlugin 配合使用的時候，無法通過 process.env.xxx 來獲取到設置的環(huán)境變量，需要通過 webpack.DefinePlugin 里面設置的 key 來獲取。

會引發(fā)這個問題的可能原因是：先往 cross-env 里設置了 NODE_ENV 變量，然后又到 DefinePlugin里設置了一遍環(huán)境變量

"scripts": {
 "dev": "cross-env NODE_ENV='development' --mode development"
}

// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// development
}

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

console.log('process.env.NODE_ENV',process.env.NODE_ENV);// development

module.exports = {
 	entry:'./src/index.js',
    output: {
      filename: 'js/[name].js'
    },
 	plugins:[
      new webpack.DefinePlugin({
       	// 設置環(huán)境變量
        	'process.env.NODE_ENV':JSON.stringify('development'),
      }),
    ],
  		...
};

此時會發(fā)現(xiàn)瀏覽器環(huán)境和 node 環(huán)境都能獲取到設置的變量了，然后就認為之后再設置其他的全局變量時，也像這樣寫就行了。

認為 cross-env 和 DefinePlugin 是配套一起使用的，這個看法本身就很奇怪，因為兩者的作用點不一樣

DefinePlugin 的作用：是設置瀏覽器環(huán)境下能讀取到的 "全局變量"，直接通過 key 讀取，在 node 環(huán)境下是無法讀取到的
cross-env 的作用：是通過命令行設置環(huán)境變量 NODE_ENV，使 node 環(huán)境下能讀取到，通過 process.env.NODE_ENV 讀取
如果在DefinePlugin 里設置的 key 是 process.env.NODE_ENV ，會覆蓋 webpack 通過 mode 模式設置的環(huán)境變量的值

"scripts": {
 "dev": "cross-env NODE_ENV='development' --mode development"
}

// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// 666666
}

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

console.log('process.env.NODE_ENV',process.env.NODE_ENV);// development

module.exports = {
 	entry:'./src/index.js',
    output: {
      filename: 'js/[name].js'
    },
 	plugins:[
      new webpack.DefinePlugin({
        // 注意：因為同名的 key，這里的值會覆蓋默認的值 ?。。。。?！
        	'process.env.NODE_ENV':JSON.stringify('666666'),
      }),
    ],
  		...
};

四、總結

cross-env 是專門用來設置 node 環(huán)境變量的

webpack.DefinePlugin 是專門用來設置瀏覽器環(huán)境下的全局變量（不會掛載到 window 上）

本文只是我個人的理解，如有錯誤還請告知，萬分感謝

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

Webpack中使用環(huán)境變量的各種正確姿勢

JavaScript中關于數組的調用方式
這篇文章主要介紹了JavaScript中關于數組的調用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
HTML 自動伸縮的表格Table js實現(xiàn)
在開發(fā)的過程中，表格Table有個缺陷，如果一行中某個單元格的超過一行，表格就不夠美觀了。
2009-04-04
分享幾種比較簡單實用的JavaScript tabel切換
這篇文章主要分享幾種比較簡單實用的JavaScript tabel切換的相關資料,需要的朋友可以參考下
2015-12-12
淺談Axios去除重復請求方案
本文主要介紹了Axios去除重復請求方案，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
javascript將數字轉換整數金額大寫的方法
這篇文章主要介紹了javascript將數字轉換整數金額大寫的方法,通過自定義函數中的數組替換實現(xiàn)數字轉換整數金額大寫的功能,非常具有實用價值,需要的朋友可以參考下
2015-01-01
js+canvas實現(xiàn)滑動拼圖驗證碼功能
這篇文章主要介紹了js+canvas實現(xiàn)滑動拼圖驗證碼功能，本文結合實例代碼分步驟給大家介紹的非常詳細,需要的朋友可以參考下
2018-03-03
webpack拆分壓縮css并以link導入的操作步驟
我們運行打包后會發(fā)現(xiàn)less轉為了css文件，但css文件確通過js加入style標簽，下面我們將css進行拆分出來，并以link標簽引入，具體實現(xiàn)步驟一起看看吧
2021-10-10
解決bootstrap模態(tài)框數據緩存的問題方法
今天小編就為大家分享一篇解決bootstrap模態(tài)框數據緩存的問題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
JS實現(xiàn)雙擊屏幕滾動效果代碼
這篇文章主要介紹了JS實現(xiàn)雙擊屏幕滾動效果代碼,涉及JavaScript鼠標事件的響應及頁面元素屬性的動態(tài)變換技巧,需要的朋友可以參考下
2015-10-10
微信小程序與h5的相互跳轉場景分析
這篇文章主要介紹了微信小程序與h5的相互跳轉場景分析,在微信小程序內編寫webview文件,通過webview去跳轉h5,loadUrl為h5的地址,非嵌套,h5需要跳轉打開某個微信小程序,需要的朋友可以參考下
2023-10-10