📦 웹팩(Webpack) 1 | 웹팩의 개념, 번들러(Bundler), 웹팩 사용방법

 

 

 

 

웹 개발을 공부할 때 자주 등장하는 단어 '웹팩', 웹팩이란 무엇일까?

하나의 웹 페이지를 만들기 위해서는 .sass파일(css), .js파일, .html파일, .jpg 이미지 파일 등 수많은 파일이 생겨난다.

 

 

naver.com 페이지에 접속하더라도 굉장히 많은 JS,CSS, Img 파일들을 불러오는 것을 확인할 수 있다. 하지만 이렇게 많은 파일을 서버와 계속 통신하며 받아올 경우, 렌더링 속도가 느려질 것이다. 

 

 

또한, 같은 변수명을 사용하는 다른 파일이 있다면, 덮어씌워지는 등 문제점이 생긴다. 

 

렌더링된 화면

 

바로 위의 문제를 해결하기 위해서 도입된 개념은 모듈(module)이다.  스크립트의 타입을 모듈로 바꾼 후, export, import를 사용해서 같은 변수를 가지고 있더라도 각각 분리해서 사용할 수 있다. export된 word의 값은 오직 word가 정의된 파일 내부에서만 접근할 수 있다. 

<script type="module">
  import hello_word from "./source/hello.js";
  import wolrd_word from "./source/world.js";
  
  document.querySelector("#root").innerHTML = hello_word;
</script>

let hello_word = "hello";

export default hello_word;

 

하지만 이 경우에도 여러가지 문제점이 생긴다. 일단 import, export라는 키워드는 ES6에서 새로 추가된 키워드이기 때문에 아직 지원되지 않는 브라우저가 있다. 

 

그리고 index.html 파일을 열면 파일들이 받아와지는 것을 볼 수 있다. 하지만 하나가 아니라 수백, 수천개의 파일을 불러온다면 속도가 굉장히 느려질 것이다. 

 

이 문제들을 해결하기 위해 나온 도구들을 번들러(Bundler)라고 한다.

 

 

 

Bundle

* Bundle, 번들은 영어로 묶음이라는 뜻이며 보통 상품을 구매했을 때 끼워주는 것을 말한다. (ex 스마트폰을 사면 주는 이어폰이나 충전기 등이다)

 

웹 개발에서 말하는 번들은 정의된 구조와 파일 확장자를 갖는 디렉터리로, 개념상 관련된 파일들을 모두 하나로 묶어주는 역할을 하는 도구이다. (Webpack, Broserify, Parcel, etc.)

 

 

그리고 그 중 웹팩은 가장 인기있는 번들러 중 하나이다. 

 

 

 

 

웹팩 사용 방법

이제 웹팩을 사용해서 word 변수를 출력해보자. 

 

1. node.js 프로젝트 선언하기 

npm init

package name만 입력해주고, 나머지는 enter로 기본설정을 해주면 package.json파일이 생성된다. 

* package.json : 프로젝트에 대한 상세한 설명서

* npm : 모듈 스토어

 

 

 

2. webpack, webpack-cli 설치하기 

npm install -D webpack webpack-cli 

 

 

package.json 파일에 모듈이 추가된 것을 볼 수 있다. 

 

 

 

3. 웹팩 실행시키기

npx webpack --entry ./source/index.js --output-path ./public/index_bundle.js

이 명령어의 뜻은 엔트리 파일(처음 화면에 렌더링되는 파일)은 index.js이고, 번들링 한 후(모든 파일을 하나로) 결과물을 ./public/index_bundle.js 에 생성하라는 명렁어이다. (나중에 설정 파일을 만들어서 한 번에 관리할 수도 있다)

 

 

번들링이 된 것을 확인할 수 있다. 

 

이제 번들링된 파일을 index.html 에서 스크립트 파일로 불러오면 렌더링되는 것을 확인할 수 있다. 

그리고 단 하나의 번들링된 파일만을 다운받는 것을 볼 수 있다. 이제 아무리 파일이 많더라도 비슷한 파일끼리(.js, .css, etc.)  합쳐져 하나의 파일만을 불러올 것이다. (웹팩의 기능)

 

 

 

 

 

 

 

create-react-app의 경우

CRA를 사용해서 개발을 할 경우, 기본 Webpack 설정들이 되어있다. 때문에 설정들을 보기 위해서는 eject해아한다. 

npx run eject

 

새로 생성된 config와 scripts 디렉터리에서 webpack 설정을 볼 수 있다. 

 

 

 

 

 

 

https://webpack.js.org/

 

즉,  웹팩은 공식홈페이지에 나온 그림처럼 INPUT으로 여러 모듈들이 들어왔을 때, 가공을 해서 하나의 파일로 OUTPUT을 내주는 도구이다.

 

 

 

 

 

 

[참고 자료]

 

Webpack의 핵심

 

Concepts | webpack

 

 

웹팩 이전의 세계와 모듈 소개 - Webpack