- 웹팩은 자바스크립트로 만든 모듈 뿐 아니라 css, html, 이미지 리소스 등등 모든것을 모듈처럼 다룰 수 있습니다. 이것을 가능하게 만들어 주는것이 바로 로더입니다.
로더가 기본적으로 하는 일은 파일을 지정해서 로더 함수에서 정한 일을 처리하게 만드는 것입니다.
커스텀 로더 만들기
- Loader 로 사용할 파일 하나를 작성합니다.
- webpack.config.js 파일에서 로더를 등록합니다.
css-loader & style-loader
css-loader가 하는 일은 자바스크립트 파일에 css 를 불러와서 사용할 수 있게 합니다. 코드 샌드박스라는 서비스를 아시나요? 여기서도 css를 모듈처럼 불러와 사용하고 있습니다. 거기서 사용하는 코드를 그대로 가져와서 로컬에서 사용해보도록 하겠습니다.
우리는 웹팩으로 css 를 모듈처럼 사용해봅시다.
- 모듈로 불러올 css 파일을 생성합니다.
- App.js 파일에 import 문으로 css 파일을 불러옵니다.
- css-loader를 설치합니다.
npm install css-loader
- webpack.config.js 파일로 이동해서 css-loader 모듈을 등록합니다.
여기까지 처리하면 일단 main.js 에는 css 파일이 문자열로 변환된 것을 확인할 수 있습니다.
하지만 아직 html 파일에 나오지는 않는데요, 아직 자바스크립트에 들어있는 css 코드를 html에 넣어주지 않았기 때문입니다. 이를 위해 사용하는것이 바로 style-loader입니다.
- Style-loader를 설치합니다.
npm install style-loader
- webpack.config.js 파일로 이동해서 style-loader 모듈을 등록합니다.
File-loader
앞서 로더는 js 뿐만 아니라 모든 파일을 모듈처럼 사용할수 있다는 말씀을 드렸었습니다. 이번에는 이미지 파일을 모듈처럼 사용해보겠습니다.
이미지 파일을 모듈에서 불러오게 되면 이미지의 이름이 해시 값으로 바뀌어 있는 것을 확인할 수 있습니다.
이는 이미지가 갱신되었을 때 파일명이 기존과 동일할 경우 브라우저가 여전히 이전 이미지를 보여주는 경우를 막기 위해서 입니다. 캐쉬값이 기존의 이미지를 저장하고 다시 부르게 되는 경우에 이미지가 업데이트 되지 않도록 함을 방지합니다.
원래 웹팩5 이전까지는 파일을 모듈링 하기 위해서는 file-loader 라는 로더를 따로 설치해야 했지만 웹팩5로 오면서 더 이상 필요하지 않게 되었습니다.
Base64 포멧으로 이미지 불러오기
간단한 이미지의 경우 다운로드하여 사용하지 않고 문자열로 그려내는 방법이 있습니다.
마치 svg 이미지를 xml코드로 그려낼 수 있는 것 처럼, 일반적인 이미지 파일도 base64문자열 포멧으로 만들 수 있습니다.
- webpack.config.js 에 asset/inline 로더(https://webpack.kr/guides/asset-modules/)를 추가합니다. 따로 설치할 필요는 없습니다. 웹팩5 이전에는 url-loader 를 따로 설치했어야 하지만 이제는 사용하지 않습니다. (https://v4.webpack.js.org/loaders/url-loader/)
- 이렇게 문자열로 표현된 이미지는 다운로드를 하는것이 아니기 때문에 로딩 속도가 빠릅니다. 하지만 너무 복잡한 이미지를 base64로 만들게 되면 오히려 코드가 너무 길어저 로딩이 느려질 수 있습니다.
- 만약 변경하고 싶은 이미지의 크기에 제한을 두고 싶다면 type을 ‘asset’ 으로 변경하고 아래와 같은 코드를 추가합니다.
type: 'asset', parser: { dataUrlCondition: { maxSize: 20 * 1024 // 20kb } },