웹 개발 시에는 보통 개발 모드와 프로덕션 모드 두 가지 모드로 작업을 진행합니다. 개발 모드에서는 실시간으로 변경 사항을 반영하여 개발을 수행하고, 프로덕션 모드에서는 최적화된 번들 파일을 생성하여 배포합니다. 이러한 모드 전환은 웹팩(Webpack)을 사용하여 간단하게 설정할 수 있습니다. 이번 글에서는 웹팩을 이용하여 개발 모드와 프로덕션 모드를 설정하는 방법에 대해 알아보겠습니다.

개발 모드 설정하기

웹팩에서 개발 모드를 설정하려면 mode 옵션을 development으로 설정하면 됩니다. 이렇게 설정하면 디버깅을 용이하게 하기 위해 웹팩은 여러가지 기능들을 제공합니다. 예를 들어, 개발 모드에서는 최적화와 관련된 코드가 제거되지 않고 출력되며, 웹팩에서 제공하는 디버깅 도구를 사용할 수 있습니다.

module.exports = {
  mode: 'development',
  // ...
}

프로덕션 모드 설정하기

프로덕션 모드를 설정하기 위해서는 mode 옵션을 production으로 설정하면 됩니다. 이렇게 설정하면 웹팩은 최적화를 위한 다양한 기능들을 사용하고, 결과물로 생성되는 번들 파일의 크기를 줄여줍니다. 또한, 개발 모드와 달리 빌드 속도도 향상됩니다.

module.exports = {
  mode: 'production',
  // ...
}

모드 설정 후 확인하기

웹팩의 모드 설정이 제대로 되었는지 확인하기 위해서는 process.env.NODE_ENV 값을 확인하면 됩니다. 개발 모드일 경우 development, 프로덕션 모드일 경우 production이라는 값을 얻을 수 있습니다. 따라서, 이 값을 기준으로 필요한 작업들을 추가적으로 수행할 수 있습니다.

if (process.env.NODE_ENV === 'development') {
  // 개발 모드에서 실행할 코드들
} else if (process.env.NODE_ENV === 'production') {
  // 프로덕션 모드에서 실행할 코드들
}

결론

웹팩을 이용하여 개발 모드와 프로덕션 모드를 간단하게 설정하는 방법에 대해 알아보았습니다. 웹 개발 시에는 개발 모드로 실시간으로 변경 사항을 반영하여 개발하고, 프로덕션 모드로 번들 파일을 최적화하여 배포하는 것이 일반적입니다. 웹팩의 모드 설정을 통해 각 모드에 맞게 필요한 작업들을 설정할 수 있습니다.