Webpack 환경 변수

1️⃣  webpack cli 활용하기

webpack 커맨드라인 환경 옵션 --env를 사용하면 원하는 만큼 환경 변수를 전달할 수 있다.

환경 변수는 webpack.config.js에서 엑세스할 수 있다. package.json파일의 scripts섹션에서 아래와 같이 설정.

"scripts": {
    "dev": "webpack-dev-server --env development --mode development",
    "build": "webpack --mode production"
  },

• env 변수를 사용하려면 module.exports를 함수로 변환해야 한다.

module.exports = (env, { mode }) => {
  const environment = env.NODE_ENV === 'development';

  return {
    // ... 기존 설정
  };
};

 

+ package.json파일의 scripts에 NODE_ENV=development를 추가하면 Node.js 프로세스의 환경 변수로 설정된다.

"dev": "NODE_ENV=development webpack-dev-server --mode=development"

module.exports = () => {
  console.log(process.env.NODE_ENV) // development

  return {
    // ... 기존 설정
  };
};

  

❗️
webpack.config.js에서 mode를 설정하거나 cli에서 --mode=development를 사용할 경우 DefinePlugin의 process.env.NODE_ENV를 development로 설정한다. React app 내부에서 환경 변수 접근 가능
https://webpack.kr/configuration/mode/#usage

 

---

2️⃣  webpack.config.js에서 전역 상수 생성

EnvironmentPlugin, DefinePlugin을 사용하면 컴파일 타임에 구성할 수 있는 전역 변수를 만들 수 있다.

const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development'
    })
  ]
}

 

 

+ webpack.EnvironmentPlugin 내부적으로 DefinePlugin을 사용하고 있으며, 아래의 코드와 동일하게 동작한다. 

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('development')
});

---

3️⃣  dotenv 모듈을 통한 환경별 .env파일 사용하기

1. package.json 파일의 scripts 섹션에서 환경 변수 설정

// package.json script 설정

"NODE_ENV=development webpack-dev-server --mode development"

const dotenv = require('dotenv');

dotenv.config({ path: `.env.${process.env.NODE_ENV}` });

module.exports = {
    // ... 기존 설정
};

 

2. webpack cli를 통한 env 파라미터를 통해 환경 별 설정가능 

"webpack-dev-server --env development --mode development"

const dotenv = require('dotenv');

module.exports = (env, { mode }) => {
  const environment = env.NODE_ENV;
  
  dotenv.config({ path: `.env.${environment}` });
  
  return {
    // ... 기존 설정
  };
};

---

4️⃣ dotenv-webpack 

dotenv-webpack은 dotenv와 Webpack.DefinePlugin을 포함한다.

DefinePlugin을 사용해 전역 변수를 생성하고 dotenv로 환경 변수를 로드한다.

  plugins: [
    new Dotenv({
      path: path.resolve(__dirname, `.env.${process.env.NODE_ENV ?? 'local'}`),
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public/index.html'),
    }),
  ],

 

 

참조

https://webpack.kr/guides/environment-variables/

https://webpack.kr/api/cli/#env

https://webpack.kr/configuration/configuration-types/#exporting-a-function

https://www.npmjs.com/package/dotenv-webpack

https://webpack.kr/plugins/define-plugin/#root