3/20 일일정리 번들링과 웹팩

번들링(Bundling)

번들링이란 사용자에게 웹페이지를 제공하기 위하여 여러 코드들을 묶는 과정을 말한다.

웹페이지가 발전하고 세분화되면서 모듈 파일이 늘어나고, 모듈 파일을 불러올 때 발생하는 변수의 스코프문제나 네트워크 문제 등을 해결하기 위해서 번들링이 필요하게 되었다.

번들링을 하게되면 흩어져있는 여러 파일을 압축, 난독화 하여 하나의 파일로 묶어준다. 주로 javascript파일을 묶지만, 플러그인을 통하여 css, html, 이미지등도 압축하여 최적화 가능하다.

 

여러가지 번들링 툴(tool)이 있지만 가장 대중적인 웹팩(Webpack)에 대해 알아보고 실습해보았다.

 

웹팩(Webpack)

https://webpack.kr/

웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 말한다.

 

웹팩을 사용하는 이유

⓵ 웹 애플리케이션의 로딩 속도가 빨라지고 높은 성능을 낸다.

⓶ 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어든다.

⓷ 웹 개발 작업을 자동화 할 수 있다.

 

웹팩 실습

HTML, CSS, Javascript로 작성되어 있는 웹페이지를 웹팩을 사용하여 번들링해서 배포하는 실습을 진행하였다.

( 나만의 아고라스테이츠 레퍼런스 코드를 사용했다.)

 

먼저 웹팩과 웹펙관련 로더 및 플러그인을 설치한다.

npm install -D webpack webpack-cli
npm i -D css-loader style-loader
npm i -D html-webpack-plugin

 

그리고 webpack.config.js 를 작성한다.

entry는 번들링 시작 파일을 나타낸다. 

output은 번들링된 파일이 저장될 장소를 지정하는데, 여기서는 docs 폴더 내부에 app.bundle.js라는 파일로 만들어지도록 지정해줬다.

 

module은 loader를 지정해주는 프로퍼티인데, 웹팩은 기본적으로 javascript 파일과 JSON 파일만 인식하기 때문에 loader를 통하여 다른 유형의 파일(css같은)을 처리해줘야 한다. 

여기서는 .css로 끝나는 파일을 css-loader, style-loader로 처리해주도록 했다.

(exclude는 컴파일하지 않을 파일이나 폴더를 지정한다.)

 

plugins 프로퍼티는 사용할 플러그인을 등록한다. 플러그인을 사용하면 번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행할 수 있다.

여기서 사용한 HtmlWebpackPlugin은 html 파일에 자동으로 script 태그를 추가해 주는 등의 기능을 한다.

 

이렇게 config 설정을 하고 웹팩을 실행하면 번들링된 파일이 생긴다.

 

기존에 3개였던 js파일과 css 파일이 하나로 합쳐진 것을 볼 수 있다.

 

Reference

- 코드스테이츠

- https://tech.weperson.com/wedev/frontend/bundling-transpiler/#webpack

- https://webpack.kr/

- https://joshua1988.github.io/webpack-guide/guide.html