1. babel

• 자바스크립트의 컴파일러이다.
• 최신의 자바스크립트 코드를 이전 단계의 자바스크립트 코드로 변환 가능하게 해주는 개발도구, 즉 트랜스 파일러이다. ES6를 사용하여 프로젝트를 진행하려면 ES6로 작성된 코드를 IE를 포함하여 모든 브라우저에서 문제없이 작동할만한 개발환경을 구축해야하는데 Babel을 이용하면 웹 브라우저간의 호환을 책임져준다.

1. 구문 (Syntax) 변환
2. Polyfill 기능(현재 환경에 없는)
3. 소스 코드 변환

2. webpack

• 프래임워크에서 가장 많이 사용되는 모듈 번들러
• (HTML, CSS Javascript, image 등)을 모두 모듈로 보고 조합하여 결과물을 만들어줌
• 여러개로 나누어져있는 파일을 하나의 자바스크립트 코드로 압축하고 최적화
• 분리된 파일을 모듈 단위로 사용가능하다
• 각 파일끼리 서로 스코프를 침범하지 않게 해준다.
• 여러개 파일을 하나의 파일로 변경하여 네트워크 비용을 최소화해준다.
• ES6문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 변환

Entry

웹팩이 빌드할 파일의 시작 위치를 나타낸다.
시작점으로부터 필요한 모듈을 로딩하고 하나의 파일로 묶는다

Output

번들링된 결과물을 저장할 위치와 파일의 이름을 지정한다.

Loader

• 웹팩은 자바스크립트 외에 파일도 전부 모듈로 관리한다,
• 하지만 웹팩은 오직 Javascript와 JSON만 이해할 수 있기 때문에 변환이 필요.
• 다른 타입의 파일(img, font, stylesheet 등) 웹팩이 이해 가능한 모듈로 변환한다.
• Test: 변환해야 하는 파일 / use: 로더 설정
• Babel-loader: ES6문법을 ES5 문법으로 변환하여 모든 브라우져에서 사용가능
• Css-loader, style-loader : CSS파일을 자바스크립트로 변환

Plugin

• 로더가 파일단위로 처리하는 반면, 플러그인은 번들된 결과물을 처리한다.
• 번들된 자바스크립트 코드를 난독화 한다거나 특정 텍스트를 추출
• Bundle optimiztaion, asset, management, injection for enviroment

Mode

• Development(빠르게 빌드)
• production(최적화)
• none

출처 링크-1
출처 링크-2
출처 링크-3
출처 링크-4