Frontend/Bundle2 [Webpack] 생활 코딩 정리웹팩 사용해보기 마음 같아서는... 하나하나 깊게 공부하고 싶었는데 주말이란 시간이 참 빠른 것 같다... 급하게 강의들으면서 간단하게 정리를 해본다...! 웹팩을 사용하게 되면 파일을 하나로 묶어서 웹브라우저 로딩시 컴퓨터 커넥트를 줄여 속도를 빠르게 개선할 수 있고 예전 버전까지 모듈기능이 잘 구현될수록 있도록 자동으로 컴파일해준다. 그래서 ESM(export, import)은 최신 브라우저에서만 작동하는데 이것 또한 예전 브라우저에서도 잘 작동할 수 있도록 컴파일해주기 때문에 바벨 없이 사용 가능! npm init package.json 파일이 생기면서 프로젝트에 대한 여러가지 설명이 들어간다. 엔트리 파일 index.js 파일에 모든 js파일들을 import 해놓음. 그리고 이 파일을 번들링 시킴. npx web.. 2021. 10. 11. [Webpack]웹팩이란 ? 웹팩(Webpack)이란? 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(html, css, javascript, images 등)을 모두 각각의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구를 의미한다. 번들링이 필요한 이유 번들링 없이 웹사이트를 로딩시키면 매우 많은 파일들이 로딩되며 이렇게 많이 접속할수록 앱은 느려질 수 밖에 없다. 또한 여러 js 파일들 중에서 같은 변수명을 가진 데이터들끼리 충돌이 일어날 수도 있다. 웹팩에서의 모듈/번들링 웹팩에서 지칭하는 모듈이라는 개념은 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 .. 2021. 10. 10. 이전 1 다음 반응형
