Wie definiere ich globale Variablen in Ihrer Webpack-Konfiguration?

Globale Variablen mit Webpack definieren

In Ihrer Webpack-Konfiguration können Sie verschiedene Methoden verwenden, um globale Variablen zu definieren.

1. Module

Erstellen Sie ein Modul und exportieren Sie ein Objekt, das Ihre globalen Variablen enthält. Importieren Sie dieses Modul und greifen Sie auf die Variablen zu.

// config.js
export default {
  FOO: 'bar',
};

// somefile.js
import CONFIG from './config.js';
console.log(`FOO: ${CONFIG.FOO}`);

2. ProvidePlugin

Verwenden Sie das ProvidePlugin, um ein Modul als globale Variable verfügbar zu machen. Dieses Plugin bindet das Modul nur in den Modulen ein, in denen Sie es verwenden.

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

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      utils: 'utils',
    }),
  ],
};

3. DefinePlugin

Verwenden Sie das DefinePlugin, um globale Konstanten als JSON-Strings zu definieren.

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

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
    }),
  ],
};

4. Globales Objekt

Greifen Sie auf das globale Objekt (Fenster in Browsern, global im Knoten) zu, um globale Variablen zu definieren.

// SPA or browser environment
window.foo = 'bar';

// Webpack will convert global to window
global.foo = 'bar';

5. Dotenv (Serverseite)

Verwenden Sie das Paket „dotenv“, um Umgebungsvariablen aus einer .env-Datei in die Datei „process.env“ von Node zu laden.

// 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,
});

Das obige ist der detaillierte Inhalt vonWie definiere ich globale Variablen in Ihrer Webpack-Konfiguration?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!