webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a which maps every module your project needs and generates one or more bundles.
내가 처음에 webpack이란 단어를 접한 것은 node.js를 처음 배울 때이었다. node나 npm 사용법을 잘 모르는 상태에서 어떤 패키지를 가져다 쓰려고 무진 애를 썼었다. 그 때, 타고 타고 들어가다 보니 webpack과 babel까지 와 있었다. 물론 그 때는 읽어도 무슨 말인지 전혀 감이 오지 않아 결국은 CDN을 썼던 기억이 난다.
한글로 번역해도 이해하기 어려운 webpack의 개념을 좀 더 쉽게 설명해보고자 한다.
예시를 들어 설명한 Webpack
React를 예시로 들어 설명해보고자 한다. React를 모르는 사람이더라도 npm으로 다운받은 패키지를 써본 사람이라면 금방 이해할 수 있을 것이다. 아래와 같은 코드가 있다고 생각해보자.
import React from "react"; // 1번
const App = () => {
return (
<div>
<h1>hello world!</h1>
</div>
);
}
export default App; // 2번간단히 설명하자면 react라는 모듈에서 React를 가져와 App이라는 React component 를 만들고, 그 것을 다시 모듈로 export 하는 것이다. 결국 이 컴포넌트들은 index.html이라는 파일로 들어가게 된다. 여기서 문제는 컴포넌트가 이것만 있는 것이 아니라는 점이다. 여러 개의 컴포넌트들이 있을 것이고, 어떤 컴포넌트들은 안에서 또 다른 컴포넌트들을 import하여 사용할 것이다. 그렇다면 이 모든 것들이 index.html로 모여질 때 자연히 먼저 가져와야 할 것이 있을 것이다. 만약 먼저 포함되어야 할 것들이 포함되지 않은 상태에서 다른 자바스크립트 파일을 포함시키면 에러가 날 것이다.
생활코딩의 이고잉님이 자주 쓰시는 숫자를 빌려서 이야기하자면, 이렇게 다른 것들에 대해 의존하고 있는 컴포넌트들이 1억개가 있다고 가정해보자. 그 복잡한 의존성 관계를 분석하여 index.html에 순서대로 집어넣어 주는 것은 사람의 힘으로는 매우 힘들 것이다.
이 때 webpack이 등장한다. webpack은 최상단 자바스크립트 파일에서 시작해 연결된 파일들을 타고 내려가며 의존성 그래프를 만들어낸다. 이 과정을 통해 무엇이 무엇에 의존성을 가지고 있고, 따라서 무엇이 무엇보다 먼저 포함되어야 하는지 분석한다. 그리고 그 순서대로 자바스크립트 파일들을 조합해 하나 또는 여러 개의 번들(bundle)을 만든다. 번들의 의미는 "묶음, 꾸러미"라고 번역한다. webpack이 만드는 번들은 필요한 모든 자바스크립트 파일을 순서대로 묶은 거대한 자바스크립트 파일을 말한다.
이렇게 번들이 만들어지고 나면 우리는 더이상 index.html에 어떻게 스크립트 태그를 포함 시켜야 좋을지 고민하지 않아도 된다. 아래와 같이 body 태그가 끝나기 전에 번들 파일만 포함시켜주면 된다.
<html>
<head>
...
</head>
<body>
<div id="root"></div>
<script src="main-bundle.js"></script>
</body>
</html>Webpack의 설정 세팅, webpack.config.js
Since version 4.0.0, webpack does not require a configuration file to bundle your project. Nevertheless, it is to better fit your needs.
버전 4부터는 번들을 만들기 위해 설정파일을 만들지 않아도 됩니다. 하지만 그럼에도 불구하고, 당신의 요구사항에 맞게 설정할 수 있습니다.
webpack 공식문서에 나와 있는 설명으로는 버전 4 이상부터는 설정 파일이 필수가 아니라고 한다. 하지만 많은 사람들이 자신의 프로젝트에 맞게 필요한 것만을 갖춘 설정 파일을 사용한다. 설정 파일이 하나만 있을 때는 보통 webpack.config.js라고 이름 붙인다. 개발 과정에서 사용하는 webpack과 실제 완성물을 만드는데 사용하는 webpack의 설정을 나눠 다르게 하는 경우도 있다. (대부분은 이렇게 하지 않을까)
