Webpack 구조

04 Apr 2022

Webpack은 번들링 해주는 프로그램이다. 쉽게 말하자면 다수의 JavaScript를 하나로 만들어 주는 프로그램이다. (물론 JavaScript 외 파일들도 번들링이 가능하다) 그렇다면 왜 다수의 JavaScript를 하나로 만드는 걸까?

과거엔 페이지마다 새로운 html을 호출했지만.. html의 용량이 가벼워서 상관이 없었다. 점점 html에 담는 내용들이 많아지면서 용량이 무거워지고 매 번 호출하는게 버거워졌다. 그래서 SPA(Single Page Appllicaion)를 사용하게 되는데! SPA란 뭘까?

전체 페이지를 하나에 페이지에 담아 동적으로 화면을 바꾸는 것이 SPA다. Action이 생기면 최초 로드된 자바스크립트를 통해 화면만 바뀌는 것이다! 그렇기에 최초 로딩은 느릴 수 있지만, 서버에 요청이 줄어드니까 트래픽이 줄어든다.

이러한 최초 로드된 자바스크립트를 만들기 위해 Webpack을 사용하는 것이다!

그렇다면 (설치 이후!) Webpack은 어떻게 사용하는 걸까? Webpack은 기본적으로 webpack.config.js에서 설정해준다.

1. Entry와 Output을 설정해준다. Entry란 모듈의 의존 관계를 설정해주는 것이다.
   이러한 의존 관계를 통해 만들어진 번들 파일을 설정해주는 곳이 Output이다.

   module.exports = {
     entry: {
    main: "./src/main.js",
     },
     output: {
    filename: "bundle.js",
    path: "./dist",
     },
   }