Webpack을 왜 사용하나요?

- 하나의 파일로 js 파일을 번들할 수 있습니다.

- 프론트엔드 코드에 npm 패키지를 사용할 수 있습니다.

- ES6/ES7 자바스크립트 코드를 작성할 수 있습니다. (Babel을 이용하여)

- 코드를 압축 또는 최적화할 수 있습니다.

- LESS/SCSS를 CSS로 돌릴 수 있습니다.

- HMR(Hot Module Replacement)을 사용할 수 있습니다.

- 자바스크립트로 모든 유형의 파일을 포함할 수 있습니다.

- 이 글에서 다루지 못한 아주 많은 고급기능이 있습니다.

왜 이러한 기능이 필요한가요?

- js 파일 번들 - 자바스크립트를 모듈로 작성할 수 있습니다, 그래서 각각의 파일에 대해서 <script> 태그를 별도로 작성할 필요가 없습니다. (상황에 따라서 둘 이상의 js 파일이 필요한 경우 구성 가능함)

- npm 패키지 사용 - npm은 인터넷상에서 오픈소스 코드의 커다란 생태계입니다. npm 코드를 저장할 기회가 주어지며, 원하는 프론트엔드 패키지를 가져다 쓸 수 있습니다.

- ES6/ES7 - 많은 기능을 추가되어 더 강력하고 더 쉽게 자바스크립트를 작성할 수 있습니다.

- 코드 압축/최적화 - 배포되는 파일의 크기를 줄입니다. 페이지 로딩이 빨라지는 등의 장점을 포함합니다.

- LESS/SCSS를 CSS로 돌리기 - CSS를 작성하는 더 좋은 방법입니다. 여기에 소개하는 글이 있습니다.

- HMR 사용 - 생산성이 향상됩니다. 코드를 저장할 때 마다 페이지의 리프레시가 자동으로 이루어집니다. 코드를 작성하는 동안 페이지의 상태를 최신으로 유지해야 하는 경우 정말 편리합니다.

- 자바스크립트로 모든 유형의 파일을 포함 - 추가적인 빌드 도구의 수를 줄일 수 있고, 프로그램적으로 파일을 사용 및 수정할 수 있습니다.

츨처 : https://firejune.com/1798/