로더
·3분 읽기·4 views
웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만 아니라 스타일, 이미지, 폰트까지 전부 모듈로 바라본다.
이것들이 가능한 이유는!! 웹팩의 로더 덕분이다!
엔트리 포인트부터 모듈을 검색하다가 설정한 파일에 패턴을 검색하고 ( ex. test : /.css$/) 해당 패턴을 찾으면 use에 설정한 로더 함수를 실행한다. (ex. use : ["css-loader"] )
웹팩은 모든것을 모듈로 바라보고 있기에 스타일시트도 불러올 수 있다.
npm install -D css-loader
웹팩 설정에 로더를 추가
import "./style.css"
webpack.config.js:
module.exports = {
...
module: {
rules: [
{
test: /\.css$/, // .css 확장자로 끝나는 모든 파일
use: ["css-loader"],
},
],
},
...
}
웹팩은 엔트리 포인트부너 시작해서 모듈을 검색하다가 css파일을 찾으면 css-loader로 처리한다.
모듈로 변경된 스타일 시트는 돔에 추가되어야만 브라우저가 해석이 가능하나. css-loader로 처리하면 자바스크립트 코드로만 변경이 되었지 돔에 적용되지 않아 스타일이 적용되지 않는다. (위 부분에 대해서는 브라우저 동작원리에 대해 자세하게 알 필요가 있다.)
자바스크립트로 변경된 스타일을 동적으로 돔에 추가하는 로더이다. **css를 번들링 하기 위해서는 css-loader와 style-loader를 함께 사용한다. **
npm install -D style-loader
webpack.config.js:
module.exports = {
...
module: {
rules: [
{
test: /\.css$/, // .css 확장자로 끝나는 모든 파일
use: ["style-loader", "css-loader"], // style-loader를 앞에 추가한다
},
],
},
...
}
배열로 설정하면 뒤에서 앞으로 순서대로 로더가 종작한다.
css 이외에서 소스코드에서 사용하는 모든 파일을 모듈로 사용하게 끔 한다.
파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옯겨주는 역할을 한다. css에서 url() 함수를 사용할때 바로 요녀석 file-loader를 사용하여 파일을 처리한다.
webpack.config.js:
module.exports = {
...
module: {
rules: [
{
test: /\.png$/,
use: "file-loader",
options : {
publicPath : './dist/', // prefix를 아웃풋 경로로 지정
name : '[name].[ext]?[hash]', // 파일명 형식
}
},
],
},
...
}
publicPath file-loader가 처리하는 파일을 모듈로 사용할 때 경로 앞에 추가되는 문자열이다.
사용하는 이미지의 갯수가 많다면 네트워크 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 줄 수 있다. 만약 한 페이지에서 작은 이미지를 여러개 사용한다면 Data URI Scheme을 이용하는 방법이 더 낫다.
이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 형식이다.
webpack.config.js:
module.exports = {
...
module: {
rules: [
test: /\.png$/,
use: {
loader: 'url-loader', // url 로더를 설정한다
options: {
publicPath: './dist/', // file-loader와 동일
name: '[name].[ext]?[hash]', // file-loader와 동일
limit: 5000 // 5kb 미만 파일만 data url로 처리
}
}
},
],
},
...
}
file-loader에 limit 값을 추가한 것이 차이점이다. 5kb 미만 파일만 data url로 처리하고 5kb 이상 파일을 file-loader로 처리한다.(default loader)
아이콘처럼 용량이 작거나 사용 빈도가 높은 이미지는 파일을 그대로 사용하는 것보다 Data URI Scheeme을 적용하기 위해 url-loader를 사용하는 것이 효율적이다!