Webpack이란?
여러개의 파일을 하나의 파일로 묶어주는 개발 자동화 도구이다.
webpack을 이해하기 위해 필요한 개념
모듈(module)
모듈화는 각 파일들 충돌하지 않도록 분리를 해준다주는 것이다.
아래와 같은 파일이 있다고 해보자
./hello.js
const word = 'hello';
./world.js
const word = 'world';
./index.html
<head>
<script src='./hello.js'></script>
<script src='./world.js'></script>
</head>
<body>
<div id='root'></div>
<script>
document.querySelector('#root').inngerHTML = word;
</script>
</body>이때 root에는 무엇이 담길까?
답은 world이다. 그 이유는 hello.js와 world.js 모두 word라는 이름이있고 index.html의 head에서 world.js가 hello.js보다 늦게 실행되면서 덮어씌기가 된 것이다. 이렇게 모듈화를 해주지 않은 경우에는 변수가 충돌할 수 있기 때문에 코드를 짜기 어렵다.
그럼 모듈화를 하면 어떻게 될까?
./hello.js
const word = 'hello';
export default word;
./world.js
const word = 'world';
export default word;
./index.html
<head>
</head>
<body>
<div id='root'></div>
<script type='module'>
import hellow_word from './hello.js';
import world_word from './world.js';
document.querySelector('#root').inngerHTML = hello_word;
</script>
</body>위처럼 import, export를 이용해서 각 변수 또는 함수를 따로 가지고 올 수 있다. 따라서 모듈화되었기 때문에 word라는 변수에 접근을 할 수 없게 된다.
export default와 export의 차이점은
export default는 한 파일에서 하나만 할 수 있고 import로 받아올 때 export할 때 보내는 이름과 다르게 변수 이름을 지정할 수 있다.
export default word;
----------------------------------------
import random_word from './filename.js'export는 한 파일에서 여러개를 할 수 있고 import로 받아올 때 export할 때 보내는 이름과 똑같이 해야한다. 만약 다른 변수 이름을 사용하고 싶다면 'as'를 이용하면 된다. 그리고 export defaul와 구분하기 위해서 {}로 덮어줘야한다.
export default word;
----------------------------------------
import {word} from './filename.js'
or
import {word as random_word} from './filename.js'모듈을 알아야하는 이유는 webpack이 번들링을 할 때, 모듈을 타면서 번들링을 하기 때문이다.
webpack을 사용하는 간단한 과정
- node.js가 다운받아져 있어야한다.
yarn add -D webpack webpack-cli or npm install -D webpack webpack-cli
Webpack은 개발환경에서 필요하기 때문에 -D를 이용해서 devDependencies에 설치해줘야한다.- npx webpack --entry ./startfilenam.js --output ./public/index_bundel.js
여기서 ./startfilenam.js는 번들링을 시작하는 지점이고 번들링을 다한 결과는 ./public/index_bundel.js에 저장이 된다.
bundler의 장점
-
js 파일에는 다른 파일이지만 같은 이름의 변수 또는 함수가 존재할 수 있다. 이때 bundler를 해주지 않는다면 같은 변수, 함수 간에 충돌이 일어날 수 있다.
-
우리 프로젝트에 100 파일이 있다면 브라우저에서 우리 프로그램을 실행시키면 네트워트는 100개의 파일을 다 다운 받아야한다. 하지만 webpack을 사용하면 번들링 훨씬 적은 파일 개수를 다운 받으면 된다.
-
옛 브라우저도 호환이 가능하다. 번들링을 하면 오래된 브라우저도 사용할 수 있도록 코드가 변환된다. 따라서 우리는 최신 브라우저의 좋은 기능을 사용하면서 옛 브라우저 또한 호환이 가능한 것이다.
