• 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 모듈 번들러이다.

• 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 한다.

  

• 빌드, 번들링, 변환 이 세 단어 모두 같은 의미이다.

웹팩 사용 이유

• 파일 단위로 javascript 모듈 관리를 할 수 있다. (ES6 modules도 가능)

• 여러 종류의 모듈들을 모두 자바스크립트 코드로 합쳐서 import 할 수 있도록 해준다.

  • ES modules - import 구문
  • Common JS modules - require() 구문
  • AMD modules - define 과 require 구문
  • CSS imports - css/sass/less 파일들 안에서 사용되는 @import 구문
  • Image URLs - url(...) 또는 <img src="..." />
  • 브라우저별로 HTTP 요청 숫자 제약이 있기 때문에 파일을 합쳐 요청 횟수를 줄이는 것이 좋다.
  • 이전에는 grunt, gulp 등을 사용해서 번들링할 경우 js와 css, 이미지 등을 각각 직접 번들링해줘야 하지만 웹팩을 사용하면 하나의 진입 파일로 모든 파일들을 번들링 할 수 있다.

  

  

• 웹팩은 로딩 시간을 줄이기 위해서 Lazy Loading과 Tree Shaking을 한다.

  • Lazy Loading: code splitting 기능으로 모듈을 원하는 타이밍에 로딩한다.
  • Tree Shaking: 사용하지 않는 라이브러리를 떨궈낸다.

• HTML, CSS, JS, 이미지 압축, CSS 전처리기 변환(SCSS → CSS) 등을 해준다.

• 코드를 수정한 뒤 저장하고 새로고침하는 일을 웹팩이 처리해준다.

웹팩 설치

1. 빈 폴더에서 아래 명령어로 package.json 파일을 생성한다.

   npm init -y
   

2. 아래 명령어로 해당 폴더에 웹팩 관련 라이브러리와 lodash 라이브러리 설치한다.

   • 웹팩은 개발단에서만 사용하기 때문에 devDependency로 설치해야 한다.

   npm i webpack wepack-cli webpack-dev-server -D
   npm i lodash
   

웹팩 설정

• webpack.config.js 파일에 원하는 옵션을 설정한다.
• build 명령어 옆에 추가해서 작성해도 되지만, 옵션이 많아지면 build 명령어가 길어지게 되므로 따로 분리하는 것이 좋다.
  • ex) “build”: “webpack —mode=none —entry=src/index.js —output=public/output.js”
• 프로젝트 폴더 루트에 생성

mode