Webpack
![[JS] DeepDive(49) Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdqHOz0%2Fbtsv5mSTkly%2FzvV5x2ugzaeK4cRVdoqFzk%2Fimg.png)
[JS] DeepDive(49) Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축
크롬,사파이 , 파이어폭스 , 엣지 등 대부분 브라우저는 ES6을 지원한다. IE 11의 ES6 지원률을 매우 낮으며 매년 새롭게 도입되는 ES6+ 버전이나 제안단계의 ES제안 상양은 브라우저에 따라서 지원율이 제각각이다. 즉 ES6+와 ES.NEXT의 ECMAScript사양을 활용하려면 최신 사양으로 작성된 코드를 때에 따라서는 구형 브라우저에서도 동작시키기 위한 환경 구축이 필요하다. 대부분 프로젝트가 모듈을 사용하므로 모듈 로더도 필요한데 ESM은 대부분 브라우저에서 사용할 수 있긴 하지만 몇가지 이유로 별도의 모듈 로더를 사용하는것이 일반적이다. 1. 구형브라우저에서 ESM을 지원하지 않음 2. ESM을 사용해도 트랜스파일링이나 번들링이 필요함 3. ESM이 아직 지원하지 않는 기능이 있으며 해결..
03_Webpack 기본구조
Webpack Webpack은 웹어플리케이션에 도움을 주는 하나의 도구이다. Webpack의 기본 구조 https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org Webpack의 공식문서에 가면 가장먼저 보이는 이미지가 위 이미지이다. 다양한 확장자로이루어져서 서로 연결되어 있는 파일들이 뭔가 깔끔하게 정리된 모습을 확인할 수 있다...