Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

webpack 設置環境變量

小魚魚呢 2021-08-16 23:24:24 阅读数:5588 评论数:0 点赞数:0 收藏数:0

一 前言

本文內容參考自 juejin.cn/post/684490… ,部分內容經過測試有修改。

測試系統:本文中的相關代碼測試環境為macOS(2021-08-06)

日常的前端開發工作中,一般會配置兩套構建環境,開發環境和生產環境。

webpack提供 mode 配置選項,告知 webpack 使用相應模式的內置優化。如果沒有設置,webpack 會給 mode 的默認值設置為 production

選項 描述
development 會將 DefinePlugin 中 process.env.NODE_ENV 的值設置為 development. 為模塊和 chunk 啟用有效的名。
production 會將 DefinePlugin 中 process.env.NODE_ENV 的值設置為 production。為模塊和 chunk 啟用確定性的混淆名稱,FlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPlugin 和 TerserPlugin 。
none 不使用任何默認優化選項

二 配置環境變量的多種方式

1. 使用命令行

寫法一
  • webpack 4
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
複制代碼
  • webpack 5
"scripts": {
"dev": "webpack server",
"build": "webpack"
},
複制代碼
  • 以上 script 脚本,可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量
  • 但無法在 node 環境(webpack 配置文件中)下獲取當前的環境變量

webpconk.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
console.log(`webpack 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`);
// webpack 打印 process.env.NODE_ENV: undefined
module.exports = {
entry: {
index: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "./build"),
filename: "[name].js",
},
...
};
複制代碼

src/index.js

console.log(`index 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`)
// yarn dev
// webpack4 index 打印 process.env.NODE_ENV: development
// webpack5 index 打印 process.env.NODE_ENV: production
// yarn build
// webpack4 index 打印 process.env.NODE_ENV: production
// webpack5 index 打印 process.env.NODE_ENV: production
複制代碼
寫法二
  • webpack4
"scripts": {
"dev2": "webpack-dev-server --mode=development",
"build2": "webpack --mode=production"
},
複制代碼
  • webpack5
"scripts": {
"dev2": "webpack server --mode=development",
"build2": "webpack --mode=production"
},
複制代碼
  • 以上 script 脚本,可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量, 跟隨命令行--mode選項的值
  • 但無法在 node 環境(webpack 配置文件中)下獲取當前的環境變量
寫法三

webpack4

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

webpack5

"scripts": {
"dev3": "webpack server --env=development",
"build3": "webpack --env=production"
},
複制代碼
  • 以上 script 脚本,在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量,在開發模式下(web server),--env不管是設置development或者production,webpack4始終返回developmentwebpack5始終返回production
  • 可以在 node 環境(webpack 配置文件中)下,通過函數獲取當前環境變量

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = (env) => {
console.log(`webpack 打印 env: `, env);
// yarn dev3 --env=development
// webpack4 webpack 打印 env: development
// webpack5 webpack 打印 env: { WEBPACK_SERVE: true, development: true }
// yarn dev3 --env=production
// webpack4 webpack 打印 env: production
// webpack5 webpack 打印 env: { WEBPACK_SERVE: true, production: true }
// yarn build3 --env=development
// webpack4 webpack 打印 env: development
// webpack5 webpack 打印 env: { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true, development: true }
// yarn build3 --env=production
// webpack4 webpack 打印 env: production
// webpack5 webpack 打印 env: { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true, production: true }
return {
entry: {
index: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "./build"),
filename: "[name].js",
},
...
};
};
複制代碼

src/index.js

console.log(`index 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`)
// yarn dev --env=development
// webpack4 index 打印 process.env.NODE_ENV: development
// webpack5 index 打印 process.env.NODE_ENV: production
// yarn dev3 --env=production
// webpack4 index 打印 process.env.NODE_ENV: development
// webpack5 index 打印 process.env.NODE_ENV: production
// yarn build3 --env=development --env=production
// webpack4 index 打印 process.env.NODE_ENV: production
// webpack5 index 打印 process.env.NODE_ENV: production
複制代碼

2. 使用 webpack mode 配置選項

  • 和使用命令的寫法二(--mode),是一樣的結果
  • 可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量,跟隨mode配置選項
  • 但無法在 node 環境(webpack 配置文件中)下獲取當前的環境變量

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
console.log(`webpack 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`);
// webpack 打印 process.env.NODE_ENV: undefined
module.exports = {
mode: "development",
entry: {
index: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "./build"),
filename: "[name].js",
},
...
};
複制代碼

src/index.js

console.log(`index 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`)
// mode: "development"
// index 打印 process.env.NODE_ENV: development
// mode: "production"
// index 打印 process.env.NODE_ENV: production
複制代碼

3. 使用 webpack.DefinePlugin

DefinePlugin 允許在 編譯時 將你代碼中的變量替換為其他值或錶達式。

  • 可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量
  • 但無法在 node 環境(webpack 配置文件中)下獲取當前的環境變量

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
console.log(`webpack 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`);
// webpack 打印 process.env.NODE_ENV: undefined
console.log(`webpack 打印 V_VERSION: ${V_VERSION}`);
// ReferenceError: V_VERSION is not defined
module.exports = {
entry: {
index: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "./build"),
filename: "[name].js",
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: false,
port: 8000,
},
// 插件
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development"),
V_VERSION: JSON.stringify("v1.0.0"),
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// 模板匹配
template: "./src/index.html",
filename: "index.html",
chunks: ["index"],
}),
],
};
複制代碼

src/index.js

console.log(`index 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`)
// index 打印 process.env.NODE_ENV: development
console.log(`index 打印 V_VERSION: ${V_VERSION}`)
// index 打印 V_VERSION: v1.0.0
複制代碼

4. 使用 cross-env 插件

寫法一

webpack4

"scripts": {
"dev4": "cross-env NODE_ENV=development V_VERSION=v2.0.0 webpack-dev-server",
"build4": "cross-env NODE_ENV=production V_VERSION=v2.0.0 webpack"
},
複制代碼

webpack5

"scripts": {
"dev4": "cross-env NODE_ENV=development V_VERSION='v2.0.0' webpack server",
"build4": "cross-env NODE_ENV=production V_VERSION=v2.0.0 webpack"
},
複制代碼
  • 可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量,命令行NODE_ENV的值無論是development還是production,webpack4在開發模式下(web server),值都為development,生產構建時值為productionwebpack5環境變量的值跟隨命令行NODE_ENV的值
  • 可以在 node 環境(webpack 配置文件中)下獲取當前的環境變量,跟隨命令行NODE_ENV的值

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
console.log(`webpack 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`);
// yarn dev4 NODE_ENV=development
// webpack 打印 process.env.NODE_ENV: development
// yarn dev4 NODE_ENV=production
// webpack 打印 process.env.NODE_ENV: production
// yarn build4 NODE_ENV=development
// webpack 打印 process.env.NODE_ENV: development
// yarn build4 NODE_ENV=production
// webpack 打印 process.env.NODE_ENV: production
console.log(`webpack 打印 V_VERSION: ${V_VERSION}`);
// ReferenceError: V_VERSION is not defined
module.exports = {
entry: {
index: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "./build"),
filename: "[name].js",
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: false,
port: 8000,
},
...
};
複制代碼

src/index.js

console.log(`index 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`)
// yarn dev4 NODE_ENV=development
// webpack4 index 打印 process.env.NODE_ENV: development
// webpack5 index 打印 process.env.NODE_ENV: development
// yarn dev4 NODE_ENV=production
// webpack4 index 打印 process.env.NODE_ENV: development
// webpack5 index 打印 process.env.NODE_ENV: production
// yarn build4 NODE_ENV=development
// webpack4 index 打印 process.env.NODE_ENV: production
// webpack5 index 打印 process.env.NODE_ENV: development
// yarn build4 NODE_ENV=production
// webpack4 index 打印 process.env.NODE_ENV: production
// webpack5 index 打印 process.env.NODE_ENV: production
console.log(`index 打印 V_VERSION: ${V_VERSION}`)
// Uncaught ReferenceError: V_VERSION is not defined
複制代碼
寫法二

webpack4

"scripts": {
"dev5": "cross-env NODE_ENV=development webpack-dev-server --mode development",
"build5": "cross-env NODE_ENV=production webpack --mode production"
},
複制代碼

webpack5

"scripts": {
"dev5": "cross-env NODE_ENV=development webpack server --mode development",
"build5": "cross-env NODE_ENV=production webpack --mode production"
},
複制代碼
  • 可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量,跟隨命令行--mode選項的值
  • 可以在 node 環境(webpack 配置文件中)下獲取當前的環境變量,跟隨命令行NODE_ENV的值

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
console.log(`webpack 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`);
// yarn dev5 NODE_ENV=development --mode development
// webpack 打印 process.env.NODE_ENV: development
// yarn dev5 NODE_ENV=production --mode production
// webpack 打印 process.env.NODE_ENV: production
// yarn dev5 NODE_ENV=development --mode production
// webpack 打印 process.env.NODE_ENV: development
// yarn dev5 NODE_ENV=production --mode development
// webpack 打印 process.env.NODE_ENV: production
// yarn build5 NODE_ENV=development --mode development
// webpack 打印 process.env.NODE_ENV: development
// yarn build5 NODE_ENV=production --mode production
// webpack 打印 process.env.NODE_ENV: production
// yarn build5 NODE_ENV=development --mode production
// webpack 打印 process.env.NODE_ENV: development
// yarn build5 NODE_ENV=production --mode development
// webpack 打印 process.env.NODE_ENV: production
module.exports = {
entry: {
index: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].js",
},
...
};
複制代碼

src/index.js

console.log(`index 打印 process.env.NODE_ENV: ${process.env.NODE_ENV}\n`)
// yarn dev5 NODE_ENV=development --mode development
// index 打印 process.env.NODE_ENV: development
// yarn dev5 NODE_ENV=production --mode production
// index 打印 process.env.NODE_ENV: production
// yarn dev5 NODE_ENV=development --mode production
// index 打印 process.env.NODE_ENV: production
// yarn dev5 NODE_ENV=production --mode development
// index 打印 process.env.NODE_ENV: development
// yarn build5 NODE_ENV=development --mode development
// index 打印 process.env.NODE_ENV: development
// yarn build5 NODE_ENV=production --mode production
// index 打印 process.env.NODE_ENV: production
// yarn build5 NODE_ENV=development --mode production
// index 打印 process.env.NODE_ENV: production
// yarn build5 NODE_ENV=production --mode development
// index 打印 process.env.NODE_ENV: development
複制代碼

總結

  • cross-env: 它是運行跨平臺設置和使用環境變量(Node中的環境變量)的脚本。

  • --mode: 可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量,但無法在 node 環境(webpack 配置文件中)下獲取當前的環境變量

  • DefinePlugin: 允許在 編譯時 將代碼中的變量替換為其他值或錶達式。可以在任意模塊內通過 process.env.NODE_ENV 獲取當前的環境變量,但無法在 node 環境(webpack 配置文件中)下獲取當前的環境變量

版权声明
本文为[小魚魚呢]所创,转载请带上原文链接,感谢

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领