Webpack 러닝 가이드
  • Webpack 모듈 번들러
  • Web Modules
    • Legacy 모듈 관리
    • ES 모듈 관리
  • Babel
    • Babel JavaScript 컴파일러
    • Babel 독립형 빌드
    • Babel 노드 (Node.js) ✘
    • Babel CLI 구성
    • Babel 플러그인
  • webpack
    • Webpack 개발 환경 구성
      • Webpack 설치
      • Webpack 통합
      • Webpack 구성 파일
      • Webpack 워치
      • Webpack 모드
      • Webpack 별칭 등록
      • Webpack 호환성
      • Webpack 개발 서버
      • Webpack 멀티 페이지 설정
    • Webpack 로더
      • File 로더
      • CSS 로더
      • PostCSS 로더
      • Sass 로더
      • Babel 로더
      • TypeScript 로더
    • Webpack 플러그인
      • 환경 변수 등록
      • 빌드 결과 자동 정리
      • 빌드 결과 자동 주입
      • CSS 파일 개별 추출
      • CSS 파일 크기 최적화
      • CSS 미디어쿼리 스플리팅
      • 이미지 파일 크기 최적화
  • React
    • React App 매뉴얼 구성
      • Webpack 초기 구성
      • Babel 컴파일러 구성
      • CSS 스타일 구성
      • 이미지 구성
      • 환경변수 플러그인
      • HTML 플러그인
      • 최적화 구성
      • 코드 스플리팅
      • 개발 서버
      • 이미지, 폰트 에셋 구성
      • 환경 변수 + HTML 구성
      • 빌드 최적화 구성
      • 빌드 자동 정리 구성
      • 개발 서버 구성
      • 폴리필 구성
Powered by GitBook
On this page
  • 비교
  • development 모드
  • none 모드
  • production 모드
  • 참고

Was this helpful?

  1. webpack
  2. Webpack 개발 환경 구성

Webpack 모드

PreviousWebpack 워치NextWebpack 별칭 등록

Last updated 4 years ago

Was this helpful?

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

mode 값

설명

development

개발 모드

production

배포 모드 (기본 값)

none

기본 최적화 옵션 설정 해제

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

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

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

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

npx webpack --mode=development

비교

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

development 모드

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

none 모드

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

production 모드

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

참고

LogoMode | webpackwebpack