웹팩,바벨

위처럼 자바스크립트에서는 각각 다른 스크립트 파일에서 코드를 작성하더라도 하나의 자바스크립트 파일 내에 있는 것처럼 동작한다.이렇게 되면 변수들이 겹치거나 오염 되는 문제가 발생하는데, 각각 독립적으로 존재할수 있도록 모듈이 탄생하였다. ES6 의 모듈을 사용할 수 있

Webpack은 기본적으로 모든 파일을 모듈로써 바라보기 때문에 자바스크립트 코드와 JSON파일만 이해할 수 있다. 스타일시트, 이미지, 폰트까지도 다 모듈로 보기때문에, Import 구문을 사용함으로써 자바스크립트 안으로 불러들여서 사용한다. 다른 파일들을 웹팩이 이

로더는 특정 유형의 모듈을 변환되는데에 사용되지만 (이미지 파일이나 txt파일들을 변환), 플러그인은 번들을 최적화 하거나 에셋을 관리하고 환경 변수 주입 등 광범위한 작업에 사용된다. 로더 정리 글로더에서는 설정해놓은 확장자 파일 전부에 로더 함수가 실행이 되지만,

바벨 공식 홈페이지바벨은 자바스크립트 컴파일러이다.바벨은 현재 환경이나 더 오래된 브라우저 환경에서 ECMAScript2015+(ES6, ES7) 문법들을 사용할수 있도록 변환해주는 역할을 하는 도구이다 .위의 코드의 const 변수선언과 화살표함수는 ES6 문법이다.

바벨은 여러 플러그인들을 모아둔 프리셋들을 제공하는데, 대표적으로@babel/preset-env@babel/preset-react@babel/preset-typescript @babel/preset-flow이렇게 총 4가지가 있다. ECMAScript2015+ 문법을