webpack 이전의 세계

 

 

웹팩 이전의 script 태그를 가져오는 방식

 

아래 방식의 단점

 

1. 변수 이름 충돌의 가능성

<script src="./source/hello.js"></script>
<script src="./source/world.js"></script>

 

script 태그의 module 타입 사용하기

 

아래처럼 script 태그의 type의 module을 사용하면 변수 충돌 가능성을 배제시킬 수 있다.

각각의 word 변수는 각각 모듈 안에서만 유용하다

 

아래 방식의 단점

 

1. 오래된 웹브라우저에서 호환성이 낮다.

2. 자바스크립트 파일을 모두 다운로드 받아야 하므로 리소스 가 많이 든다.

<script type="module">
	import hello_word from "./source/hello.js";
    import world_word from "./source/world.js";
</script>

 

hello.js

var word = "Hello";
export default word;

 

world.js

var word = "World";
export default word;

 

 

웹에서도 모듈의 개념을 사용하고,

여러개의 파일을 하나로 묶어 제공하고 싶다는 생각이

반영된 것이 바로 번들러

그중 가장 대중적으로 사용하는 webpack