webpack과 만들어진 이유

webpack(웹팩)

웹팩은 프론트엔드 프레임워크에서 사용하는 모듈 번들러(Module Bundler)이다.

모듈 번들러는 HTML, CSS, JS 등의 파일을 각각 모듈로 보고 모든 모듈을 조합해서 하나로 만드는 도구를 의미한다.

모듈

function sum(a, b) {
  return a + b;
}

export { sum }

모듈은 위 코드처럼 기능을 갖는 작은 단위의 코드이다.

웹팩에서는 HTML, CSS, JS, 이미지, 폰트 등이 각각 모듈이다.

모듈 번들링

webpack 공식 사이트 사진

모듈 번들링은 여러 자원들을 하나의 파일로 병합 및 압축해주는 동작을 의미한다.

(빌드, 번들링, 변환은 모두 같은 의미이다.)

 

-참고 페이지

https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%97%90%EC%84%9C%EC%9D%98-%EB%AA%A8%EB%93%88

웹팩이란? | 웹팩 핸드북

---

만들어진 이유

파일 단위 js 모듈 관리

웹팩을 사용하지 않으면 a.js에서 num을 선언하고 b.js에서도 num을 선언하면 num이 중복되는 문제가 발생한다.

// a.js
var a = {
    num: 10
}

// b.js
var b = {
    num: 20
}

웹팩을 사용하면 위 코드처럼 저장을 하여 중복 문제를 해결해준다.

파일 압축(웹 개발 자동화)

-WEBPACK

webpack은 진입점 파일 하나만 주어지면 나머지는 연관지어서 압축해준다.

 

-GRUNT, GULP

웹팩을 사용하기 전에는 js, css, png 이런 것들을 각각 묶어서 압축해줘야 했다. 이제는 GRUNT나 GULP를 사용하여 HTML, CSS, JS 압축, 이미지 압축, CSS 전처리기 변환을 하여 자동화 할 수 있다. 

로딩 속도 개선

웹팩을 사용하지 않으면 불러올 파일들이 너무 많아져서 웹 로딩 속도가 느려진다. 그렇기에 웹팩을 사용해 모든 파일과 자원(img 같은 파일 등)을 합쳐주고 한번에 불러올 수 있게 하여 웹 로딩 속도를 빠르게 할 수 있었다.(위 파일 압축을 이용하여 개선)

여기 알아야 하는 중요한 것은 웹팩은 JS 파일만을 위한 것이 아니라 모든 파일, 자원들을 위한 것이라는 점을 알아두어야 한다.