SERIES

모듈 번들러 Webpack 사용해보기

3 Posts·Last updated on June 11, 2023

Webpack 설치 및 환경설정

June 11, 2023

이번 글에서는 을 설치하고 여러 파일로 나눠져서 개발된 모듈을 하나의 파일로 번들링하는 과정을 진행해보고자 한다. 1. 노드 패키지 설정 은 일종의 외부 모듈이기 때문에 웹팩을 설치하기 위해서는 먼저 우리의 프로젝트가 패키지 관리자에 의해서 관리되도록 해야한다. 2. webpack 패키지 설치 과 패키지를 설치한다. 웹팩으로 번들링하는 과…


HTML, CSS 로더 사용

June 11, 2023

로더란? 웹팩은 기본적으로 와 파일만 이해할 수 있기에 , , 등의 다른 유형의 데이터를 사용하기 위해서는 약간의 전처리가 필요하다. 전처리 과정에는 로더(Loader) 를 이용할 수 있다. 로더는 코드를 코드로 변환하거나 인라인 이미지를 데이터 URL로 변환하는 등, 모듈을 가져오거나 로드할 때 적절한 전처리 작업을 수행해준다. 다양한 …


Hot Module Replacement 적용하기

June 11, 2023

Hot Module Replacement(HMR) 개발하는 과정에는 소스 코드를 수정하고 실행 결과를 즉각적으로 확인해야 하는 경우가 많다. 그런데 이럴 때마다 웹팩으로 번들링하고 다시 실행하는 과정을 거친다면 굉장히 번거로울 것이다. 그렇기에 Hot Module Replacement(HMR) 를 적용한다면 소스코드의 변화를 감지하고 자동으로 브라우저…