Loaders

• 웹팩은 자바스크립트로 만든 모듈 뿐 아니라 css, html, 이미지 리소스 등등 모든것을 모듈처럼 다룰 수 있습니다. 이것을 가능하게 만들어 주는것이 바로 로더입니다.

커스텀 로더 만들기

1. Loader 로 사용할 파일 하나를 작성합니다.

2. webpack.config.js 파일에서 로더를 등록합니다.

css-loader & style-loader

1. 모듈로 불러올 css 파일을 생성합니다.

2. App.js 파일에 import 문으로 css 파일을 불러옵니다.

3. css-loader를 설치합니다.

npm install css-loader

1. webpack.config.js 파일로 이동해서 css-loader 모듈을 등록합니다.

1. Style-loader를 설치합니다.

npm install style-loader

1. webpack.config.js 파일로 이동해서 style-loader 모듈을 등록합니다.

File-loader

Base64 포멧으로 이미지 불러오기

1. webpack.config.js 에 asset/inline 로더(https://webpack.kr/guides/asset-modules/)를 추가합니다. 따로 설치할 필요는 없습니다. 웹팩5 이전에는 url-loader 를 따로 설치했어야 하지만 이제는 사용하지 않습니다. (https://v4.webpack.js.org/loaders/url-loader/)

2. 이렇게 문자열로 표현된 이미지는 다운로드를 하는것이 아니기 때문에 로딩 속도가 빠릅니다. 하지만 너무 복잡한 이미지를 base64로 만들게 되면 오히려 코드가 너무 길어저 로딩이 느려질 수 있습니다.

3. 만약 변경하고 싶은 이미지의 크기에 제한을 두고 싶다면 type을 ‘asset’ 으로 변경하고 아래와 같은 코드를 추가합니다.

type: 'asset',
parser: {
	dataUrlCondition: {
	maxSize: 20 * 1024 // 20kb
	}
},