FE
[ Webpack ] 웹팩
Chars4785
2019. 10. 2. 15:45
@ 궁금한 이유
Spring + react 연동 시키기 위해서 자료를 찾아봤는데 계속 Webpack 관련 지식이 나와서 궁금해서
@ 공부
Webpack 이란?
< 모듈 번들러 >
Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다. Webpack을 사용하면 의존 모듈이 하나 의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 자바스크립트 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다.
Webpack과 Babel을 이용하여 ES6 개발 환경을 구축하여 보자. Webpack이 자바스크립트 파일을 번들링하기 전에 Babel을 로드하여 ES6+ 코드를 ES5 코드로 트랜스파일링하는 작업을 실행하도록 설정할 것이다. 그리고 Sass를 사용하는 경우, Sass 컴파일도 Webpack에서 관리하도록 할 것이다.
## Module 정의
Module을 사용하기 위해서는 Module을 인식하는 Module System
Module
내보내기
> 한곳으로 내보내기
> 개별적으로 내보내기
가져오기
> 모듈을 하나의 객체로 보기 때문에 객체를 참조하는 형태
{함수A} {...}
CommonJS
> require > 가져오기
> module.exports > 내보내기