들어가며
스치듯이 많이 들어본, 또는 프로젝트를 진행하면서
package.json에서 많이 본 webpack!
평소에 많이 보고 자주 들어본 단어이지만 작업자 입장에서, 혼자 코딩 연습을 하며 필요성을 크게 느낄 일이 없어 관심을 갖지 않았습니다.
하지만 꼭 알아둬야 할 기본 지식!
왜 사용해야 하는지 같이 알아볼까요??
webpack??
webpack 이란 모듈 번들러입니다. 여기서 모듈이랑 번들링이라는 단어가 나오는데요!
모듈이란 html, css, js 웹사이트를 구성하는 파일 등을 말합니다. 또한 번들링 이란 여러 개의 파일을 하나의 파일로 만들어주는 방식을 번들링이라고 합니다.
홈페이지는 서버에 http 요청을 하고 요청한 파일들을 받아오는데요. 하지만 파일이 많을수록 http 요청이 많아져 페이지 컴파일의 로딩이 길어지게 됩니다.
그래서 하나의 파일로 합쳐(번들링) http 요청을 줄여주기 때문에 네트워크 비용을 줄여주게 됩니다. 그럼 로딩도 줄어들게 되어 사용자 사용성의 큰 도움이 될거에요!
spa와의 관계
최근 홈페이지를 만들 때 spa 프레임워크가 자주 사용되고 있는 추세입니다. spa 구동 방식은 하나의 html 파일에 여러 개의 js 파일로 동적인 페이지를 만들어 주고 있습니다.
자 여기서 여러 개의 js 파일로 페이지를 만들어 주고 있다를 유심히 봐야 할 것 같아요!
많은 js 파일로 구성된 spa를 webpack으로 번들링 시켜준다면 효율이 어마어마할 것 같습니다!
간단한 예제를 살펴보자!
글씨로만 설명을 들으니 크게 와닿지가 않고 잘 이해가 안 되는데요!
이러면 금방 머리에서 사라질 지식이 되어버리니 간단한 코드로 같이 보고 쉽게 이해해 보아요!
src 디렉토리에 있는 index.js만 불러오는 기본적인 html 파일이 있습니다!
index.js 안에는 test1.js, test2.js, test3.js 가 import 되어 있는데요 이걸 개발자 도구로 http 요청이 어떻게 되고 있는지 확인해 볼까요?!
개발자 도구로 확인해 보니 index.js 와 test1.js, test2.js, test3.js 각각 전부 요청하여 다운로드 된 게 확인됩니다! 총 로드된 시간은 30ms로 되어있네요!
번들링을 시도해 보자
webpack을 사용해서 test1.js, test2.js, test3.js를 번들링 해보아요! 처음 필요한 건 webpack.config.js라는 파일이 필요합니다!
공식 홈페이지에 나와있는 코드를 그대로 가져와 보겠습니다!
천천히 살펴보아요! entry는 최초 진입점이자 변화할 자바스크립 파일 경로를 지정해 주면 됩니다!
저희는 src 디렉토리에 index.js로 예를 들고 있으니 진입점 경로로 지정해 주겠습니다!
output은 번들링 된 파일 이름과 경로를 지정해 줍니다!
지금은 dist 디렉토리의 bundle.js로 설정되어 있네요!
그럼 저장하고 터미널에서 npx webpack 을 실행해 볼까요??
실행하고 나니 dist 디렉토리의 bundle.js가 생성되었습니다!
test1.js, test2.js, test3.js의 코드를 전부 담고 있는 모습인데요!
bundle.js를 개발자 도구에서 확인해 볼까요??
아까 index.js는 로드 시간이 30ms가 걸렸지만 동일한 코드 내용으로 현재 bundle.js는 16ms가 걸리는 걸 확인할 수 있습니다. 거의 절반 정도로 시간 단축이 되었는데요! 정말 놀라운 일이죠~??
마치며
오늘은 공식 홈페이지에 나와있는 간단한 예제로 같이 webpack 이란 무엇이고 왜 필요한지에 대해 알아보았습니다.
예제로 사용한 js 파일은 console.log만 찍는 간단한 js 파일입니다. 그래도 절반 가까이 시간 단축이 된다는 게 너무 놀라웠습니다!
많은 기능들이 들어있는 무거운 파일에 사용하면 효과가 몇 배는 더 좋지 않을까 생각이 들었습니다!
오늘은 js 파일로 예를 들었지만 그 외 css, image 파일 등등 다양한 파일들도 번들링이 가능하니까 더욱 좋은 기능인 것 같은데요. 또한 webpack의 기능은 번들링 말고도 좋은 장점들이 있으니 한 번 더 깊게 찾아보시는 것도 좋은 기회일 것 같습니다.
긴 글 읽어 주셔서 감사합니다!