위 포스팅은 이전 포스트의 내용을 이어서 진행합니다. [Webpack] Config file & Asset Modules [Webpack] Introduction & Setup [Webpack] Loaders [Webpack] Plugins Code Splitting 애플리케이션을 번들링 할 때, 적절한 단위로 번들을 쪼개는 것은 애플리케이션 성능에 있어서 중요한 요소 중 하나입니다. 규모가 크고 많은 페이지를 가지고 있는 애플리케이션이더라도 사용자의 화면에 보이는 페이지는 하나이기 때문에 사용자가 보지 않을 수도 있는 페이지까지 함께 가져오는 것은 잠재적인 대역폭 낭비이고, 초기 렌더링 시간을 잡아먹게 됩니다. 따라서 적절한 단위로 번들을 나누어서(Code Splitting) 빌드하는 것이 중요합니다...

위 포스팅은 이전 포스트의 내용을 이어서 진행합니다. [Webpack] Config file & Asset Modules [Webpack] Introduction & Setup [Webpack] Loaders Plugins webpack 공식 문서에는 플러그인에 대해 다음과 같이 정의하고 있습니다. 로더는 특정 유형의 모듈을 변환하는 데 사용되지만, 플러그인을 활용하여 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있습니다. 플러그인은 webpack의 핵심 요소이며, webpack의 컴파일 프로세스를 활용할 수 있는 방법을 제공해 준다는 점에서 커스텀 영역을 넓혀줍니다. 플러그인은 webpack 컴파일(번들링)과정에서 발생하는 주요 이벤트에 후킹하여 여러..

위 포스팅은 이전 포스트의 내용을 이어서 진행합니다. [Webpack] Config file & Asset Modules [Webpack] Introduction & Setup Loaders 로더(Loader)는 Webpack이 웹 애플리케이션을 번들링 할 때 자바스크립트 파일이 아닌 다른 리소스들 (Typescript, HTML, CSS, Font 등)을 변환할 수 있도록 도와줍니다. 공식문서의 설명을 인용하면 다음과 같습니다. webpack은 기본적으로 JavaScript와 JSON 파일만 이해합니다. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가합니다. 예를 들어서, 이전의 예시에서 레이아웃 구성을 위..

webpack이란 webpack은 Frontend Framework에서 가장 많이 사용되는 모듈 번들러입니다. 현재의 반응형 웹 프로그램은 HTML, CSS, JS로 구성되어 있으며, 웹 페이지에서 점차 많은 기능들을 요구함에 따라 다양한 기능이 추가되고, 다양한 라이브러리들을 추가하게 됩니다. 기능이 추가된다는 것은 대부분의 경우에 작성하는 코드의 양이 많아진다는 것을 의미합니다. 하지만 방대한 코드를 개발자가 하나의 파일에서 모두 작업하는 것은 개발과 유지보수를 어렵게 만들게 됩니다. 따라서 개발자들은 의미 있는 부분(기능 단위, 페이지 단위 등)들로 코드를 쪼개어 별도의 모듈에서 작업하는 경우가 일반적입니다. (여기서 모듈이란 웹 애플리케이션을 구성하는 모든 자원을 의미합니다. HTML, CSS, ..