-
개발을 정리하며 - Webpack 기본 개념과 간단 설치 및 사용법개발일지/webpack 2019. 10. 30. 18:00
"Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."
"웹팩은 하나의 모듈 번들러이다. 이것에 주목적은 브라우저를 사용하기 위해 자바스크립트 파일들을 묶어주는 것이 목적이다. 그리고 이것은 또한 거의 모든 리소스 또는 자산을 변환, 번들 또는 패키징 할 수 있습니다."
Webpack 사이트에 가장 주된 설명으로 위 글귀가 쓰여 있습니다.
즉, 웹펙을 만든 회사에서 한마디로 소개한 위의 짧은 글이 webpack의 모든 것을 말한다고 볼 수 있습니다.
그렇다면 모듈은 무엇이고 번들러는 무엇일까?
모듈
- 프로그램 내부를 기능별 단위로 분할한 부분. 또는, 메모리 보드 등의 부품을 간단하게 떼서 교환이 쉽도록 설계되어 있을 때의 그 각 구성 요소.
- 프로젝트를 진행하다 보면 자주 사용하는 기능들이 있다 (예, 회원가입 input에 따른 validation 결과 메시지) 이러한 기능을 하는 아주 작은 단위로 모듈화를 하여 재활용이 쉽게 하고 코드 유지보수 등이 쉽게 할 수 있게 하는 것
번들러
- 사용자의 코드와 종속성을 하나의 자바스크립트 파일에 통합하는 도구이다.
- 여러 개의 모듈의 의존성 관리를 담당하는 도구이다.
Webpack 은 여러 개의 모듈의 의존성을 관리하고 하나의 통합 파일로 관리해주는 관리 툴이라고 보시면 되겠습니다.
Why?
자 그렇다면 왜? 라는 의문이 생길 수 있습니다. 뭣 하러 잘 사용하던 기존의 방법을 버리고 새로 공부까지 해가면서 적용을 해야 할까? 기존에 사용하던 방식(저도 많이 사용했던 방식)인 html에 수십 개의 js , 수십 개의 css 등등 다양한 javascript , css 파일들을 import 하여 적용하던 시절을 생각해서 예를 들어봅시다.
한 명의 유저가 사이트를 방문했습니다. 그럼 브라우저는 수십 개의 js, css 파일을 로드를 하게 됩니다. 그 유저의 컴퓨터 환경 위치 등을 고려한다면 하나의 파일을 로드하는데 0.5초가 걸린다고 가정하면 수십 개의 파일이 로드되고 화면이 켜지기까지 2~3초가 걸릴 수도 있습니다 해외의 유저라면 더욱더 심하겠죠. 그래서 파일을 하나로 관리하는 게 성능상 유리합니다. 그렇다고 모든 프로그램을 하나의 파일로 작업을 한다면 몇만 줄이 넘어가는 스크립트 소스를 누가 유지보수를 하고 싶을까요 그것은 재앙이나 마찬가지죠.
그래서 bundler를 사용하면 다양한 파일로 기능에 맞게 모듈화 시킬 파일들을 의존성에 맞게 하나의 파일로 관리를 해주게 되어 개발자는 모듈을 만드는 데에만 집중할 수 있어서 퍼포먼스를 높일 수 있게 됩니다. 그중에 가장 유명한 녀석이 webpack bundler입니다.
How to install and use Webpack
간단 설치 및 사용방법을 webpack getting start를 참고하였습니다. (Webpack Getting Start)
처음으로 새로운 폴더를 생성하고 npm 을 초기화해줍니다. 그리고 webpack과 webpack-cli를 local에 설치를 해줍니다. 아래 명령어를 사용하시면 됩니다.
$ mkdir webpack-demo $ cd webpack-demo $ npm init -y $ npm install webpack webpack-cli --save-dev다음으로 아래의 구조대로 파일을 만들어 줍니다.
project
webpack-demo |- package.json + |- index.html + |- /src + |- index.jssrc/index.js
function component() { const element = document.createElement('div'); element.innerHTML = "Hello webpack"; return element; } document.body.appendChild(component());index.html
<!doctype html> <html> <head> <title>Getting Started</title> <script src="https://unpkg.com/lodash@4.16.6"></script> </head> <body> <script src="./dist/main.js"></script> </body> </html>자 이제 webpack을 돌려주면 됩니다.
$ webpackindex.html 을 확인해보면 Hello webpack 이 화면에 보이게 됩니다.
오늘은 간단하게 webpack의 기본 개념과 왜 써야 하는지에 대해서 정리해 봤습니다.
개념과 정리 없이 지금까지 개발해 왔다는 점에 너무 자신이 창피함을 느끼게 되는 시간이었습니다.
앞으로 하나하나 개발에 대해 기본 개념과 철학, 사용법을 익혀 가면서 , 정리하면서 포스팅을 하고자 합니다.
'개발일지 > webpack' 카테고리의 다른 글
[ 웹펙 문서 번역 ] webpack 기본 Configuration 설정법 (0) 2019.11.01 [번역] webpack 번들 생성 하기 방법 #2 (0) 2019.10.31