15. 환경별 설정 (Development, Production) - 1

Webpack의 개발과 프로덕션 환경 설정

웹팩(Webpack)은 개발 환경과 프로덕션 환경에서 다르게 동작할 수 있도록 설정할 수 있습니다. 개발 환경에서는 주로 디버깅이나 빠른 개발을 위한 기능을 활성화하고, 프로덕션 환경에서는 최적화와 성능 향상을 위해 번들을 최소화하고 압축하는 등의 작업을 수행합니다.

1. 환경 구분

먼저, 어떤 환경에서 웹팩이 실행되는지를 판단하는 방법이 필요합니다. Node.js의 process.env 환경 변수를 통해 환경을 구분할 수 있습니다.

// webpack.config.js

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  return {
    // 설정 내용
  };
};

 

위 코드에서 argv.mode는 웹팩 실행 시에 전달되는 모드입니다. development 모드인지 여부를 확인하여 환경을 판단합니다.

2. 개발 환경 설정

개발 환경에서는 주로 디버깅을 용이하게 하기 위한 속성들을 설정합니다.

// webpack.config.js

const path = require('path');

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    devtool: isDevelopment ? 'inline-source-map' : false,
    devServer: {
      contentBase: './dist',
      port: 8080,
      open: true,
    },
    // 기타 개발 환경에서 필요한 설정
  };
};

• devtool: 소스 맵 설정. 개발 환경에서는 디버깅을 용이하게 하기 위해 inline-source-map을 사용합니다.
• devServer: 개발 서버 설정. 파일이 수정될 때마다 자동으로 브라우저를 새로고침하고, 변경 사항을 실시간으로 확인할 수 있습니다.

3. 프로덕션 환경 설정

프로덕션 환경에서는 주로 번들 최소화, 압축, 최적화 등을 위한 작업을 수행합니다.

// webpack.config.js

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    optimization: {
      minimizer: [
        new TerserPlugin(), // JavaScript 최소화
        new OptimizeCSSAssetsPlugin(), // CSS 최소화
      ],
    },
    // 기타 프로덕션 환경에서 필요한 설정
  };
};

• optimization: 최적화 설정. 여기서는 TerserPlugin을 사용하여 JavaScript를 최소화하고, OptimizeCSSAssetsPlugin을 사용하여 CSS를 최소화합니다.

이렇게 개발 환경과 프로덕션 환경에서 다르게 동작하는 웹팩 설정을 통해 각 환경에 적합한 빌드를 생성할 수 있습니다.