웹 개발을 하다보면 다양한 환경에서 애플리케이션을 구동해야 하는 경우가 있습니다. 예를 들어 개발 중에는 개발 서버에서 애플리케이션을 구동하고, 운영 환경에서는 프로덕션 서버에서 구동할 수 있습니다. 이런 경우, 웹팩을 사용하여 현재 환경에 맞게 설정하는 방법을 알아보겠습니다.

환경별 설정 파일 작성하기

첫 번째로, 웹팩에서 환경에 맞게 설정하기 위해 각 환경별로 별도의 설정 파일을 작성해야 합니다. 일반적으로 webpack.config.js 파일을 작성하며, 개발 환경과 프로덕션 환경을 구분하여 설정합니다.

예를 들어, 개발 환경에서는 개발 서버를 구동하고 싶다면 다음과 같이 webpack.config.dev.js 파일을 작성할 수 있습니다.

const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  },
  devServer: {
    contentBase: './dist',
    port: 3000
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

프로덕션 환경에서는 빌드된 애플리케이션 파일을 생성하고 싶다면 다음과 같이 webpack.config.prod.js 파일을 작성할 수 있습니다.

const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  },
  plugins: [
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin()
  ]
};

환경에 맞게 웹팩 설정하기

두 번째로, 실제로 웹팩을 실행할 때 어떤 환경에 맞는 설정 파일을 사용할지 결정해야 합니다. 이를 위해 webpack.config.js 파일에서 환경별 설정 파일을 불러와야 합니다.

일반적으로 process.env.NODE_ENV 변수를 사용하여 현재 환경을 구분할 수 있습니다. 노드 환경 변수는 development, production, test 등의 값을 가질 수 있습니다. 이를 기반으로 webpack.config.js 파일을 다음과 같이 작성할 수 있습니다.

const env = process.env.NODE_ENV || 'development';
const config = env === 'production' ? require('./webpack.config.prod.js') : require('./webpack.config.dev.js');

module.exports = config;

이렇게 작성된 webpack.config.js 파일을 실행하면, process.env.NODE_ENV 값에 따라서 개발 환경 또는 프로덕션 환경의 설정 파일이 사용됩니다.

결론

웹팩을 사용하여 개발 환경과 프로덕션 환경에 맞게 설정하는 방법을 알아보았습니다. 각 환경별로 별도의 설정 파일을 작성하고, webpack.config.js 파일에서 환경에 따라 적절한 설정 파일을 불러와서 사용하는 방식입니다. 이를 통해 웹 개발을 더욱 효율적으로 진행할 수 있습니다.

참고 자료

• Webpack 공식 문서