Webpack 모드

mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있습니다.

mode 값	설명
development	개발 모드
production	배포 모드 (기본 값)
none	기본 최적화 옵션 설정 해제

"production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄입니다.

Webpack 구성 파일에 mode 속성을 추가하여 사용자가 원하는 값을 설정할 수 있습니다.

webpack.config.js

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

명령어 환경(CLI)에서 옵션으로 설정할 경우는 다음과 같이 입력합니다.

npx webpack --mode=development

비교

각 모드의 번들링 결과를 살펴봅시다. 모드에 따라 파일 크기가 달라집니다.

development 모드

개발 모드로 번들링 할 경우 출력된 결과물의 파일 크기는 40KB입니다.

none 모드

설정 없음 모드로 번들링 할 경우, 출력된 결과물의 파일 크기는 35KB입니다.

production 모드

배포 모드로 번들링 할 경우 출력된 결과물의 파일 크기는 12KB입니다.

참고

Mode | webpackwebpack