<div id="readability-page-1" class="page"><div><h2 id="번들러-기능-확장하기">번들러 기능 확장하기</h2>
간단한 스크립트를 번들링할 수 있게 되었다. 하지만 여기서 멈출 수 없다. 이제 보통의 개발에서 쓰이는 HTML 템플릿이나 정적 리소스 더 나아가 개발 서버까지 기능을 추가해보자.
<h3 id="1-resolver-개선">1. Resolver 개선</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/6c83a67b-936b-4487-b405-99f4dafa45a3/image.png">
현재 우리의 리졸버는 <code>./foo</code> 같은 상대 import만 처리하고 있다. 외부 패키지같은 절대경로를 import 처리하기 위해서 조금 수정이 필요하다
<img src="https://velog.velcdn.com/images/dongha1992/post/2fe6c287-d549-4eaa-8f1c-d47fd7e23825/image.png">
path를 순회하며 <code>node_modules/</code> 하위에 있는 패키지 이름을 가져온다. 여기까지 하면 js 파일에 대한 번들링을 수행하는 번들러를 완성한 것이다!
<h3 id="2-html">2. HTML</h3>
이제 드디어 HTML을 추가해보자. src에 간단한 index.html을 생성한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/06d9908d-9053-4a91-b8e8-d7338d33d755/image.png">
위 html 파일을 번들하여 
<img src="https://velog.velcdn.com/images/dongha1992/post/629e5823-164d-44ee-b284-51a7e34bced2/image.png">
위와 같이 산출물에 script 태그를 추가하는 것이 목표다!
과정을 간단하게 설명하면 
<ul>
<li>번들러는 HTML을 먼저 읽고 </li>
<li>번들 결과로 나온 bundle.js에 스크립트 태그에 삽입하여 </li>
<li>index.html을 함께 생성한다.</li>
</ul>
이를 위해서 먼저 <code>build</code> 함수를 수정해야 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/07370dee-37d4-4571-8804-07e55a5fe988/image.png">
<code>htmlTemplatePath</code>인자를 받고 <code>outputFiles</code>과 <code>htmlTemplatePath</code>를 <code>generateHTMLTemplate</code> 함수로 넘긴다
<img src="https://velog.velcdn.com/images/dongha1992/post/9f111303-9051-45f2-a505-011a74cb9cde/image.png">
위 방식은 webpack의 HTML 플러그인이 하는 일의 간략한 버전이라고 생각하면 된다!
<h3 id="2-css">2. CSS</h3>
이제 CSS를 추가해보자.
<img src="https://velog.velcdn.com/images/dongha1992/post/7de67d90-7f87-4493-a555-393046e03c05/image.png">
css 파일을 만들고
<img src="https://velog.velcdn.com/images/dongha1992/post/5c2743df-1c88-4f4c-a3c5-a9ce459f07fa/image.png">
<code>index.js</code>에서 스타일 파일을 import를 했다. 그리고 번들을 해보면
<img src="https://velog.velcdn.com/images/dongha1992/post/e4fafa6b-6645-468a-ad1c-41f065a6069c/image.png">
토큰을 찾을 수 없다는 에러가 발생한다. 
즉, 지금 만들고 있는 번들러는 모든 파일을 JavaScript로 가정하고 Babel로 파싱하려 해서 문제가 생기는 것이다.
이제 파일 확장자에 따라 다른 Module 클래스를 사용해야 하므로 Module 클래스를 추가하자.
<img src="https://velog.velcdn.com/images/dongha1992/post/7d30f091-84a5-4c59-a488-e107fe1f7667/image.png">
그리고 <code>createMoudule</code>에서 확장자에 따라 다른 모듈을 사용하도록 분기를 해준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/d11b9ccc-e36f-40fa-98f3-979824b52797/image.png">
이제 CSS 파일을 받기 위한 모듈을 생성했다. 아직까지는 껍데기고 이제 CSS 파일을 추출하여 <code>outputFiles</code>에 
<pre><code>{ name: 'style.css', content: cssContent }</code></pre>
이런 식으로 번들할 수 있도록 추가해주면 된다! 이제 로더를 만들 차례다
<h3 id="3-loader">3. Loader</h3>
로더란 전처리기 즉, 쉽게 말해 브라우저에서 실행 가능한 JavaScript 코드로 바꿔주는 변환기다. 
<code>import './style.css'</code> 라는 선언을 브라우저가 알 수 있도록 하는 것이 로더의 목표!
간단하게 CSS를 JS로 변환하는 순서를 설명하면
<ul>
<li>먼저 CSS 파일 내용을 문자열로 변환한다. </li>
<li>런타임에 <code>&lt;style&gt;</code> 태그를 생성하고</li>
<li>그 스타일 태그에 CSS 문자열을 넣는다</li>
<li><code>&lt;head&gt;</code>에 append 해서 적용한다</li>
</ul>
즉, 번들 결과물에는 CSS 파일이 따로 존재하는 게 아니라, 
CSS를 주입하는 JS 코드가 포함되는 것이다. 이것이 Webpack의 <code>style-loader</code>가 동작하는 방식이기도 하다. 
<pre><code>.square {
 color: blue;
}
.circle {
 color: red;
}</code></pre>
이런 css 파일을
<pre><code>const content = `.square { color: blue; } .circle { color: red; }`;
// create style tag
const style = document.createElement('style');
style.type = 'text/css';
// for ie compatibility
if (style.styleSheet) style.styleSheet.cssText = content;
else style.appendChild(document.createTextNode(content));
// append to the head
document.head.appendChild(style);</code></pre>
이렇게 js로 변환하는 것!
최신 JS 문법을 브라우저가 읽을 수 있게 JS 역시 <code>babel-loader</code>를 사용한다.
그럼, CSSModule에 CSS -&gt; JS 변환 로직을 추가해보자
<img src="https://velog.velcdn.com/images/dongha1992/post/8a24525f-601c-4a14-8b65-3219784b4859/image.png">
그리고 번들을 해보면
<img src="https://velog.velcdn.com/images/dongha1992/post/8d965e1d-d2fc-4337-a06e-c9dcd32b5d33/image.png">
스타일 코드가 잘 번들된 것을 확인할 수 있다. 
<h3 id="4-dev-server">4. Dev Server</h3>
이제 마지막으로 우리가 만든 HTML을 브라우저에 띄우기 위해 개발 서버가 필요하다. 보통의 개발 서버에서 제공하는 기능 중 가장 기본적인 기능들인
<ul>
<li>메모리에서 에셋 제공 (파일 쓰기 없이 바로 서빙)</li>
<li>Express.js 기반 간단한 HTTP 서버</li>
</ul>
만 개발해 볼 것이다. 
번들러의 <code>build</code>를 추상화하여 <code>_build</code>를 만든다. 이제 개발 모드와 빌드 모드를 나눈다. <code>_build</code>의 결과물을 가지고 빌드 모드와 개발 모드에서 다르게 사용하면 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/6ae07977-046f-4e57-82c6-709999777009/image.png">
빌드 모드일 경우 <code>_build</code>에서 추출한 결과물을 그대로 사용한다. (프로덕션용)
<img src="https://velog.velcdn.com/images/dongha1992/post/93e8e061-c377-41c5-a957-003f7a9e1d2b/image.png">
개발 모드일 경우, 파일 쓰기를 하지 않기 때문에 메모리 서빙 로직이 들어간다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/056102fd-95b2-4aef-9845-d0de3e2b529a/image.png">
이제 <code>outputFiles</code>를 <code>{ filename: content }</code> 맵으로 저장한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/43b44fde-d585-4b60-a5d4-b5a3a640f0c0/image.png">
Express로 개발 서버를 만들어야 한다. 요청은 다음과 같이 동작할 것이다.
<ul>
<li>
<code>/bundle.js</code>처럼 요청한 파일이 맵에 있으면 그 내용을 응답
</li>
<li>
없으면 index.html을 응답
</li>
</ul>
<img src="https://velog.velcdn.com/images/dongha1992/post/e733c6f3-5fbd-4c05-b496-0e24f520ba57/image.png">
마지막으로 빌드 파일을 express로 서빙해서 데브 서버까지 만들어주면 대략적으로 끝이 난다.
<img src="https://velog.velcdn.com/images/dongha1992/post/687af4c3-8d10-4cbb-8533-96f43f4b14c9/image.png">
번들을 실행해보면 output 폴더에는 아무런 산출물이 없지만 서버가 돌아간다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/0ce6e502-4693-40c5-934a-61f9969fc251/image.png">
로컬 서버도 잘 작동한다! 
예전에 막연하게 "데브 서버를 통해 로컬에 서버를 띄운다." 라고 알고 있던 것을 직접 만들어보니 어떻게 돌아가는지 확실히 알게 됐다. 
참고
<a href="https://slides.com/lucianomammino/unbundling-the-javascript-module-bundler-dublinjs#/13">https://slides.com/lucianomammino/unbundling-the-javascript-module-bundler-dublinjs#/13</a>
<a href="https://lihautan.com/building-a-simplified-webpack-clone">https://lihautan.com/building-a-simplified-webpack-clone</a> 
</div></div>

삶도 재입학이 되나요?

번들러 기능 확장하기
간단한 스크립트를 번들링할 수 있게 되었다. 하지만 여기서 멈출 수 없다. 이제 보통의 개발에서 쓰이는 HTML 템플릿이나 정적 리소스 더 나아가 개발 서버까지 기능을 추가해보자.
1. Resolver 개선
현재 우리의 리졸버는 ./foo 같은 상대 import만 처리하고 있다. 외부 패키지같은 절대경로를 import 처리하기 위해서 조금 수정이 필요하다
path를 순회하며 node_modules/ 하위에 있는 패키지 이름을 가져온다. 여기까지 하면 js 파일에 대한 번들링을 수행하는 번들러를 완성한 것이다!
2. HTML
이제 드디어 HTML을 추가해보자. src에 간단한 index.html을 생성한다.
위 html 파일을 번들하여 
위와 같이 산출물에 script 태그를 추가하는 것이 목표다!
과정을 간단하게 설명하면 
번들러는 HTML을 먼저 읽고 
번들 결과로 나온 bundle.js에 스크립트 태그에 삽입하여 
index.html을 함께 생성한다.
이를 위해서 먼저 build 함수를 수정해야 한다.
htmlTemplatePath인자를 받고 outputFiles과 htmlTemplatePath를 generateHTMLTemplate 함수로 넘긴다
위 방식은 webpack의 HTML 플러그인이 하는 일의 간략한 버전이라고 생각하면 된다!
2. CSS
이제 CSS를 추가해보자.
css 파일을 만들고
index.js에서 스타일 파일을 import를 했다. 그리고 번들을 해보면
토큰을 찾을 수 없다는 에러가 발생한다. 
즉, 지금 만들고 있는 번들러는 모든 파일을 JavaScript로 가정하고 Babel로 파싱하려 해서 문제가 생기는 것이다.
이제 파일 확장자에 따라 다른 Module 클래스를 사용해야 하므로 Module 클래스를 추가하자.
그리고 createMoudule에서 확장자에 따라 다른 모듈을 사용하도록 분기를 해준다. 
이제 CSS 파일을 받기 위한 모듈을 생성했다. 아직까지는 껍데기고 이제 CSS 파일을 추출하여 outputFiles에 
{ name: 'style.css', content: cssContent }
이런 식으로 번들할 수 있도록 추가해주면 된다! 이제 로더를 만들 차례다
3. Loader
로더란 전처리기 즉, 쉽게 말해 브라우저에서 실행 가능한 JavaScript 코드로 바꿔주는 변환기다. 
import './style.css' 라는 선언을 브라우저가 알 수 있도록 하는 것이 로더의 목표!
간단하게 CSS를 JS로 변환하는 순서를 설명하면
먼저 CSS 파일 내용을 문자열로 변환한다. 
런타임에 <style> 태그를 생성하고
그 스타일 태그에 CSS 문자열을 넣는다
<head>에 append 해서 적용한다
즉, 번들 결과물에는 CSS 파일이 따로 존재하는 게 아니라,
CSS를 주입하는 JS 코드가 포함되는 것이다. 이것이 Webpack의 style-loader가 동작하는 방식이기도 하다. 
 .square {
 color: blue;
}
.circle {
 color: red;
}
이런 css 파일을
const content = `.square { color: blue; } .circle { color: red; }`;
// create style tag
const style = document.createElement('style');
style.type = 'text/css';
// for ie compatibility
if (style.styleSheet) style.styleSheet.cssText = content;
else style.appendChild(document.createTextNode(content));
// append to the head
document.head.appendChild(style);
이렇게 js로 변환하는 것!
최신 JS 문법을 브라우저가 읽을 수 있게 JS 역시 babel-loader를 사용한다.
그럼, CSSModule에 CSS -> JS 변환 로직을 추가해보자
그리고 번들을 해보면
스타일 코드가 잘 번들된 것을 확인할 수 있다. 
4. Dev Server
이제 마지막으로 우리가 만든 HTML을 브라우저에 띄우기 위해 개발 서버가 필요하다. 보통의 개발 서버에서 제공하는 기능 중 가장 기본적인 기능들인
메모리에서 에셋 제공 (파일 쓰기 없이 바로 서빙)
Express.js 기반 간단한 HTTP 서버
만 개발해 볼 것이다. 
번들러의 build를 추상화하여 _build를 만든다. 이제 개발 모드와 빌드 모드를 나눈다. _build의 결과물을 가지고 빌드 모드와 개발 모드에서 다르게 사용하면 된다. 
빌드 모드일 경우 _build에서 추출한 결과물을 그대로 사용한다. (프로덕션용)
개발 모드일 경우, 파일 쓰기를 하지 않기 때문에 메모리 서빙 로직이 들어간다. 
이제 outputFiles를 { filename: content } 맵으로 저장한다.
Express로 개발 서버를 만들어야 한다. 요청은 다음과 같이 동작할 것이다.
/bundle.js처럼 요청한 파일이 맵에 있으면 그 내용을 응답
없으면 index.html을 응답
마지막으로 빌드 파일을 express로 서빙해서 데브 서버까지 만들어주면 대략적으로 끝이 난다.
번들을 실행해보면 output 폴더에는 아무런 산출물이 없지만 서버가 돌아간다. 
로컬 서버도 잘 작동한다! 
예전에 막연하게 "데브 서버를 통해 로컬에 서버를 띄운다." 라고 알고 있던 것을 직접 만들어보니 어떻게 돌아가는지 확실히 알게 됐다. 
참고
https://slides.com/lucianomammino/unbundling-the-javascript-module-bundler-dublinjs#/13
https://lihautan.com/building-a-simplified-webpack-clone

모듈 번들러 만들기 (2)

댓글