Webpack에 대해

최석훈·2022년 1월 20일
0

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을 사용하는 간단한 과정

  1. node.js가 다운받아져 있어야한다.
  2. yarn add -D webpack webpack-cli
    or
    npm install -D webpack webpack-cli
Webpack은 개발환경에서 필요하기 때문에 -D를 이용해서 devDependencies에 설치해줘야한다.
  1. npx webpack --entry ./startfilenam.js --output ./public/index_bundel.js
    여기서 ./startfilenam.js는 번들링을 시작하는 지점이고 번들링을 다한 결과는 ./public/index_bundel.js에 저장이 된다.

bundler의 장점

  1. js 파일에는 다른 파일이지만 같은 이름의 변수 또는 함수가 존재할 수 있다. 이때 bundler를 해주지 않는다면 같은 변수, 함수 간에 충돌이 일어날 수 있다.

  2. 우리 프로젝트에 100 파일이 있다면 브라우저에서 우리 프로그램을 실행시키면 네트워트는 100개의 파일을 다 다운 받아야한다. 하지만 webpack을 사용하면 번들링 훨씬 적은 파일 개수를 다운 받으면 된다.

  3. 옛 브라우저도 호환이 가능하다. 번들링을 하면 오래된 브라우저도 사용할 수 있도록 코드가 변환된다. 따라서 우리는 최신 브라우저의 좋은 기능을 사용하면서 옛 브라우저 또한 호환이 가능한 것이다.

profile
하루를 열심히

0개의 댓글