Webpack, Babel설정하기 지금까지 babel과 webpack의 개념을 알아봤으니 실제로 설정을 해볼게요. Babel 설정하기 먼저, 필요한 모듈들을 깔겠습니다. babel의 모듈들은 7버전부터 @babel로 시작하며 npm으로 받을 수 있습니다. @babel/core는 babel의 핵심 기능입니다. @babel/preset-env는 가장 많이 사용하는 preset으로 필수적인 plugin들이 모여있습니다. @babel/cli는 터미널에서 bable를 실행하는 모듈입니다. // npm 프로젝트를 시작하는 모든 옵션을 yes로 설정하겠다. $ npm init -y // 해당 모듈을 devdependency로 깔겠다. // @babel/cli는 굳이 안깔아도 됩니다. $ npm i @babel/cor..

Webpack Webpack이란? static module bundler for modern javascript applications. webpack은 자바스크립트의 [모듈 번들러](##모듈 번들러)입니다. webpackd은 Node.js 8버전 이상에서 돌아갑니다. 모듈 번들러란? 웹 애플리케이션에 필요한 모듈들을 하나의 파일로 묶는 도구입니다. 이때 모듈은 웹 애플리케이션을 구성하는 모든 자원(HTML, CSS, JAVASCRIPT, Images등)에 해당합니다. 즉, 웹 애플리케이션을 제작하는데 사용되는 파일을 말합니다. 기본적으로 webpack은 자바스크립트 파일과 JSON 파일을 이해하지만 loader를 이용해 다른 타입의 파일을 처리할 수 있습니다. 모듈 번들링의 원리 Entry point부..