Webpack

Webpack

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리

 

모듈 번들러

• 여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있음
• 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉬움
• 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜줌

물론 수많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있지만 웹팩에서는 청크, 캐시, 코드 스플릿 개념들을 도입하면서 이 문제를 해결하고 있다.

 

웹팩은 Entry, Output, Loader, Plugins, Mode로 구성되어 있다.

 

Entry

 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로

// webpack.config.js
module.exports = {
  entry: './src/index.js'
}

위 코드는 웹팩을 실행했을 때 src 폴더 밑의 index.jsindex.js을 대상으로 웹팩이 빌드를 수행하는 코드

 

 

Output

웹팩을 돌리고 난 결과물의 파일 경로를 의미

// webpack.config.js
module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

엔트리 속성과는 다르게 객체 형태로 옵션들을 추가해야 한다.

 

Loader

웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}

엔트리나 아웃풋 속성과는 다르게 module라는 이름을 사용한다.

 

Mode

웹팩을 세팅함에 있어서 development, production, none 중 하나를 파라미터로 사용

module.exports = {
  mode: 'xx'
};

- development: 빠르게 빌드

- production: 최적화되어 빌드

- none: 아무 기능 없이 웹팩으로 빌드

 

 

웹팩은 entry로 설정된 시작점에서 의존성을 가진 모든 파일을 압축하여 output 지점에 하나의 자바스크립트 파일을 만들어 준다. 이때, 자바스크립트가 아닌 파일은 loader를 이용하여 자바스크립트에서 이용 가능한 모듈로 만들어 주며, plugin을 이용하여 번들된 자바스크립트를 난독화하거나 특정 텍스트를 추출하고 mode는 웹팩의 사용 목적에 따라 설정을 지정하는 역할을 한다.

 

 

 

출처 

- 웹팩 핸드북 / 캡틴판교

- [JS][WEBPACK] 1. 웹팩이란 무엇인가 / Woody Kim