<aside> 🐯 webpack이 무엇인지, 왜 필요한지, 어떻게 사용할 수 있는지 알아보자.

</aside>

아래 내용은 webpack 공식문서 를 참고하였다.

webpack???

Untitled

공식문서에 따르면, webpack이란 JavaScript application을 위한 정적 모듈 번들러 이다. 하지만, 무슨 말인지 와닿지 않기 때문에, 아래를 살펴보자.

필요성

webpack은 왜 필요한 것일까? 이는 기존 HTML코드가 가지고 있는 문제점에서 기인한다.

문제점 1

우리가 HTML과 javaScript를 이용하여 웹사이트를 만든다고 생각해보자. 보통 아래의 코드처럼 작성하게 될 것이다.

//index.html
<!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="./index.js"></script>
    <script src="./index2.js"></script>
</head>
<body>
    <span>HELLO</span>
    <div id="id">TEST</div>
    <script>document.getElementById("id").innerHTML = hello</script>
</body>
</html>

//index.js
const hello = "world";
//index2.js
const hello = "shitty World";