What is Webpack? (1)
Closed this issue · 0 comments
KimKwon commented
Webpack
딱 ! 잘라 말해서 모듈 번들러이다.
Webpack의 등장배경
- 모듈의 중요성 극대화
- 모듈화된 파일의 관리방법 필요성 대두
번들러란?
- 기능 단위로 모듈화가 되어있는 여러 파일들을 묶어서 하나로 관리해주는 도구.
- 모듈코드를 분석하고 브라우저 별로 잘 실행될 수 있도록 가공해주는 도구.
모듈이란?
기존의 자바스크립트는 기능별/페이지별로 자바스크립트 파일을 분리하여 HTML에 로드했다.
하지만 코드간 의존성(Dependency) 의 발생이 불가피해졌다.
이에 따른 의존성 관리방법으로 자바스크립트의 모듈단위 개발 방법이 제시되었다.
Module
단순히 여러 파일로 코드를 작성함으로서 모듈화가 되는 것이 아니다.
우선 자바스크립트는 모든 코드가 전역스코프를 공유한다.
전역스코프를 공유한다는 것은 JS 파일 A와 B가 같이 로딩이 되었다고 했을 때, 파일A에서 선언한 변수를 파일B에서 접근이 가능하다는 것이다.
이는 어떠한 변수의 값이 내 의도와 다르게 변경될 수도 있음을 말한다.
전역 스코프와 지역 스코프
<script>
var beverage = 'BEER';
function a(){
var beverage = 'SOJU';
console.log("지역스코프의 beverage: "+ beverage); // SOJU , 함수 내에 선언한 지역 스코프 변수이기 때문이다.
}
a();
console.log("전역스코프의 beverage: "+ beverage); // BEER , 자바스크립트 간 공유하는 전역 스코프의 변수.
</script>모듈 스코프
모듈 스코프에 선언된 변수나 함수는 외부에서 접근할 수 없고 export 를 별도로 설정해준 변수와 함수만 외부에서 접근 가능하다.
모듈스코프 example
// party.js
<script>
export function drink(){
var beverage = 'SOJU';
return beverage;
}
</script>
// whatToDrink.js
<script>
import { drink } from party;
alert("party's beverage is " + drink()); // party's beverage is SOJU
</script>-
위와 같은 방식으로 원하는 변수/함수만 외부에 노출시킴으로써 의존성으로 인한 문제발생을 방지할 수 있다.
또한 어떤 모듈을 import하고 export하는지 직관적으로 파악할 수 있다. -> 모듈간의 의존성을 파악할 수 있음- 외부 패키지의 모든 정보를 관리하는 파일: package.json
- npm을 사용하여 의존성을 갖는 모듈을 효율적으로 관리해보자.
-
모듈 스코프를 사용하기 위해서는 ES6의 모듈을 사용해야한다.
- ES6 모듈을 지원하는 브라우저는 다음과 같다.
- 크롬 61 이상
- 사파리 10.1 이상
- 파이어폭스 54 이상 (dom.moduleScripts.enabled 설정 필요)
- 엣지 16 이상 (15는 Experimental Javascript Feature 설정 필요)
- 지원하지 않는 브라우저를 사용할 경우 번들러 및 트랜스파일러를 사용하여 해당 브라우저에 맞게 코드 변환이 필요하다.
- ES6 모듈을 지원하는 브라우저는 다음과 같다.