16. 환경별 설정 (Development, Production) - 2

Webpack의 Source Map 활용

웹 개발에서 디버깅은 필수적인 작업 중 하나입니다. 하지만 번들된 JavaScript 코드를 디버깅하는 것은 어려울 수 있습니다. 이런 어려움을 해결하기 위해 Source Map이라는 개념이 등장했습니다. Source Map은 번들된 코드와 원본 소스 코드 간의 매핑을 제공하여 디버깅을 용이하게 합니다.

Source Map이란?

Source Map은 원본 소스 코드와 번들된 코드 간의 매핑 정보를 담은 파일입니다. 번들된 코드에서 에러가 발생하면 Source Map을 통해 어느 부분에서 에러가 발생했는지 정확한 위치를 알 수 있습니다.

Webpack에서의 Source Map 설정

Webpack에서는 devtool 옵션을 통해 Source Map을 활성화할 수 있습니다. 다양한 타입의 Source Map이 제공되며, 각각의 특징에 따라 선택할 수 있습니다.

// webpack.config.js

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

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
    },
    devtool: isDevelopment ? 'inline-source-map' : false,
    // 기타 설정
  };
};

• inline-source-map: 소스 맵을 번들 파일에 직접 포함시킵니다. 개발 환경에서 사용하는 옵션으로 디버깅이 용이합니다.
• source-map: 별도의 파일로 소스 맵을 생성합니다. 프로덕션 환경에서 사용하며, 디버깅이 필요할 때에만 소스 맵 파일을 다운로드하여 사용합니다.

Source Map의 활용

1. 에러 디버깅: 브라우저 콘솔에서 에러가 발생했을 때, Source Map을 활성화하면 번들된 코드 대신 원본 코드에서 에러 위치를 확인할 수 있습니다.
2. 속도 저하 최소화: 프로덕션 환경에서는 Source Map을 별도의 파일로 생성하여 디버깅 정보를 최소한으로 유지하면서 속도를 개선할 수 있습니다.

Source Map을 활용하면 번들된 코드에서 발생한 문제를 보다 쉽게 해결할 수 있으며, 생산성을 향상시킬 수 있습니다.