웹팩(Webpack)이란?
최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다.
모듈 번들러란 웹 애플리케이션을 구성하는 자원(html, css, javascript, images 등)을 모두 각각의 모듈로 보고
이를 조합해서 하나의 결과물을 만드는 도구를 의미한다.
번들링이 필요한 이유
번들링 없이 웹사이트를 로딩시키면 매우 많은 파일들이 로딩되며
이렇게 많이 접속할수록 앱은 느려질 수 밖에 없다.
또한 여러 js 파일들 중에서 같은 변수명을 가진 데이터들끼리 충돌이 일어날 수도 있다.
웹팩에서의 모듈/번들링
웹팩에서 지칭하는 모듈이라는 개념은 웹 애플리케이션을 구성하는 모든 자원을 의미한다.
웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 한다.
※ 빌드, 번들링, 변환은 모두 같은 의미.
웹팩없이 웹사이트를 만든다는 것은 무엇인가?
* 모듈없이 사용 -> js 파일들을 나누어도 하나의 전연변수로 작동하면서 변수명들이 충돌남.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./source/hello.js"></script>
<script src="./source/world.js"></script>
</head>
<body>
<h1>Hello, Webpack</h1>
<div id="root"></div>
<script>
document.querySelector('#root').innerHTML=word;
</script>
</body>
</html>hello.js
var word = 'Hello';world.js
var word = 'World';result
#root의 결과값은 world가 나온다.
이 상태에서는 독립적인 파일스코프를 가지지 않고 하나의 파일처럼 작동하기 때문에
hello.js 에서 word 변수에 Hello가 할당된 다음
wordl.js에서 다시 World로 데이터 값이 할당되어
값은 world가 나오는 것이다.
이렇듯이 프로젝트 크기가 커질수록 파일수가 많아지기 때문에
변수명이 충돌할 가능성이 커진다.
이런문제를 극복하기 위해 등장한 것이 모듈이라는 것이며
최신 웹브라우저에는 기본적으로 모듈의 기능이 탑재되어 있다.
* 모듈을 사용해서 js 파일 나누기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./source/hello.js"></script>
<script src="./source/world.js"></script> -->
</head>
<body>
<h1>Hello, Webpack</h1>
<div id="root"></div>
<script type="module">
import hello_word from "./source/hello.js";
import world_word from "./source/world.js";
document.querySelector('#root').innerHTML= hello_word + ' ' + world_word;
</script>
</body>
</html>hello.js
var word = 'Hello';
export default word;world.js
var word = 'World';
export default word;result
웹팩없이 모듈을 사용하려면 이렇게 export, import를 사용해야하는데
이것들은 최신 웹브라우저에서만 지원되는 기능이며
네트워크를 켜보면 이렇게 파일 하나하나 커넥트해야하는 것을 알 수 있다.
프로젝트가 커질수록 이러한 파일들이 많아질 것이며
이는 네트워크 부하로 서비스 속도가 느려질 수 밖에 없는 것이다.
이를 해결하기 위해 번들링이라는 개념이 생기게 되었다.
참고
웹팩이란? | 웹팩 핸드북
웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각
joshua1988.github.io
'Webpack' 카테고리의 다른 글
| [Webpack] 생활 코딩 정리웹팩 사용해보기 (0) | 2021.10.11 |
|---|