使用 Webpack 定義全域變數
在 webpack 配置中,您可以使用各種方法來定義全域變數。
1.模組
建立一個模組並匯出一個包含全域變數的物件。導入此模組並存取變數。
// config.js export default { FOO: 'bar', }; // somefile.js import CONFIG from './config.js'; console.log(`FOO: ${CONFIG.FOO}`);
2. ProvidePlugin
使用 ProvidePlugin 讓模組可用作全域變數。該插件僅包含您使用它的那些模組中的模組。
// webpack.config.js const webpack = require('webpack'); const path = require('path'); module.exports = { plugins: [ new webpack.ProvidePlugin({ utils: 'utils', }), ], };
3. DefinePlugin
使用 DefinePlugin 將全域常數定義為 JSON 字串。
// webpack.config.js const webpack = require('webpack'); module.exports = { plugins: [ new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify('5fa3b9'), }), ], };
4.全域物件
存取全域物件(瀏覽器中的window,Node中的global)來定義全域變數。
// SPA or browser environment window.foo = 'bar'; // Webpack will convert global to window global.foo = 'bar';
5. Dotenv(伺服器端)
使用 dotenv 套件將環境變數從 .env 檔案載入到 Node 的 process.env 中。
// server.js require('dotenv').config(); const db = require('db'); db.connect({ host: process.env.DB_HOST, username: process.env.DB_USER, password: process.env.DB_PASS, });
以上是如何在 Webpack 配置中定義全域變數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!