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 파일의 환경 변수를 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!