Webpack 構成でグローバル変数を定義するにはどうすればよいですか?

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.グローバル オブジェクト

グローバル オブジェクト (ブラウザーのウィンドウ、ノードのグローバル) にアクセスして、グローバル変数を定義します。

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

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

5. Dotenv (サーバー側)

dotenv パッケージを使用して、環境変数を .env ファイルからノードの 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 中国語 Web サイトの他の関連記事を参照してください。