webpack 두렵지 않아요 - webpack이 뭐야?

Hoony·2022년 7월 6일

bundler webpack

webpack 두렵지 않아요

목록 보기

2/6

webpack과 관련된 용어들을 알아보고
webpack과 필요성에 대해서 알아보자.

Module과 Resource가 뭐야?

webpack에서 module은 일반적으로 아래와 같은 파일들을 의미하며, Resource라고도 한다.

html
javascript
css
image
...

Bundle? Bundler? Bundling?

Bundler가 Bundling해서 bundle을 만들어 낸다.

Bundle

번들의 해석은 '묶음'이다.
위에서 설명한 리소스들이 하나로 묶인것을 뜻한다고 생각하면 된다.

create-react-app으로 프로젝트를 만들어보면 아래와 같은 파일들이 있는데
이러한 파일들이 하나로 묶였을 때, 그것을 bundle이라고 보면 된다.

App.tsx
App.test.tsx
App.css
Index.tsx
...

Bundler

그럼 알아서 bundle이 되는가? 당연히 아니다.
Bundler가 묶어주는 작업을 하는데 우리가 알아볼 webpack이 번들러이다.
번들러는 webpack만 있는것은 아니다.

webpack
parcel
rollup
esbuild
...

등이 존재하는데 가장 유명하고 많이 쓰이는것이 webpack이다.
이 webpack이 bundle을 만드는 과정을 bundling이라고 보면 되겠다.

webpack은 왜 나왔을까?

scope 문제

예전에는 a.js와 b.js는 같은 스코프를 가졌다.
아래와 같이 html파일에 js를 포함시켰다고 하자.

<html>
	<body>
      <script src="a.js"></script>
      <script src="b.js"></script>
 	</body>
 </html>

a.js

var name = 'ABC';

b.js

name = 'EFG';

으로 작성되었다면 a.js의 name이 b.js의 코드로인해 'EFG'로 변경된다.
이유는 javascript가 파일 단위의 scope를 지원하지 않았기 때문인데
webpack은 이러한 부분을 해결해 주었다.
webpack이 동작하면 아래와 같이 변경된다고 보면 된다.

bundle.js

(function () {
  var name = 'ABC';
})

(function () {
  name = 'EFG';
})

webpack이 각 파일들을 javascript 변수의 최대 scope인 function scope로 만들어 버린다.
그러면 위 코드는 더이상 오동작을 일으키지 않는다.

물론 최근에는 module을 지원하면서 type="module"을 해주면
위 문제는 더이상 발생하지 않는다.

<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>

귀찮은 압축 및 변환 작업

실제로 사용해본 경험은 없지만 react와 webpack을 알기전에
grunt와 gulp를 사용하여 코드를 압축하는 작업을 자동화하기 위해 사용했다고 한다.
조금더 자세하게 알아보려면 링크를 참조하시라

style.min.css와 같은 파일을 본적이 있을텐데 이해할 수 없는 변수로 나열이 되어있다.
공백도 없애고, 긴 변수를 한 글자로 되어있는데 이 작업을 grunt/gulp가 해줬다고 보면 된다.
javascript 파일도 압축할 수 있는데 velog의 javascript를 하나 열어 보면 아래와 같다.