웹팩을 쓰는 이유?

이 글은 우선 npm과 모듈이 무엇인지 그리고 바닐라 자바스크립트의 기본문법에 대해 이미 공부한 독자들에게 설명하는 느낌으로 작성한 것이다.

결코 필자가 webpack을 잘 알고 있어서 튜토리얼로 작성한 글이 아니며 어디까지나 필자가 webpack에 대해 공부한 부분을 정리하기 위해 작성한 글임을 염두해뒀으면 한다.

 

웹팩을 쓰는 이유가 무엇인지 나름대로 생각해보았다

1. 파일 단위로 자바스크립트 모듈 관리 가능

여기서 모듈이란 파일이나 코드를 하나의 단위로 하여 애플리케이션 하나의 구성요소를 의미한다.

이렇게 모듈로 관리하면 장점은 각 단위로 코드를 재사용할 수 있고 규모가 큰 애플리케이션을 작은 모듈들로 잘게 분리해서 관리할 수 있다.

자바스크립트는 전역 스코프로 공유하기 때문에 변수 충돌의 가능성이 있다.

웹팩은 파일 단위로 변수를 관리해주는 기능을 제공하여 변수 충돌을 방지해준다.

 

2. 웹 개발 작업 자동화 

텍스트 편집기에서 코드를 수정하고 저장한 뒤 빌드 후 브라우저에서 새로고침을 누르는 경우가 일반적이다.

이러한 일들을 자동화 해주는 도구들이 필요한데 이것을 해결해줄 수 있다.

 

3. 웹 애플리케이션의 비교적 빠른 렌더링 과 높은 성능

웹사이트의 로딩 속도를 높이기 위해 여러 모듈을 하나의 파일로 번들링 후 생성하여 브라우저에서 서버로 요청하는 횟수를 줄일 수 있다.

 

4. 코드 스플리팅을 이용하여 필요한 모듈만을 요청가능

 

그럼 웹팩을 쓰는 이유를 알아봤으면 환경 설정에 대해 알아보자!

 

웹팩 환경설정

npm init -y를 터미널에 명령어를 입력하면 프로젝트의 패키지가 생성된다.

웹팩 라이브러리는 다음과 같이 터미널에 명령어를 입력하여 설치한다.

npm install --save-dev webpack webpack-cli

 

웹팩 실행방법

npm run webpack --entry 번들링하고자 하는 파일명 --output 번들링이 되었을 때 새롭게 생성되는 파일명

단, 위와 같은 실행방법은 간단하지만 규모가 있는 프로젝트로 진행할 경우 번들링하고자 하는 파일명이 여러 개일때 일일이 적는 것도 한계가 있고 웹팩 실행 명령어를 한번 입력하는데 여러 애로사항이 있기 때문에 다른 실행방법을 알아볼 필요가 있다.

이러한 방법을 실행하기 위해서는 우선 프로젝트 최상단에 webpack.config라는 이름의 js파일을 생성한다.

 

그럼 다음 글에서 프로젝트 최상단에 webpack.config라는 이름의 js파일을 생성한 후 해당 파일에서 코드를 작성할 때 알아둬야할 것이 무엇인지 설명하고자 한다.