로더의 역할

웹팩은 모든 파일을 모듈로 바라본다.
자바스크립트로 만든 모듈 뿐만 아니라 스타일, 이미지, 폰트까지 전부 모듈로 바라본다.

이것들이 가능한 이유는!!
웹팩의 로더 덕분이다!

1. Ts -> Js 변환
   우리가 타입스크립트로 쓴 언어도 로더를 통해 자바스크립트로 문법적으로 변환해주어 브라우저가 인식을 할 수 있다.
2. 이미지 문자열로 변환
   이미지 또한 data URL 형식의 문자열로 변환한다.
3. css 파일 로딩
   CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 해준다.

로더의 역할 정리정리

엔트리 포인트부터 모듈을 검색하다가 설정한 파일에 패턴을 검색하고 ( ex. test : /.css$/)
해당 패턴을 찾으면 use에 설정한 로더 함수를 실행한다. (ex. use : ["css-loader"] )

자주 사용하는 로더

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로 처리한다.

style-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를 앞에 추가한다
      },
      
      
    ],
  },
  ...
}

배열로 설정하면 뒤에서 앞으로 순서대로 로더가 종작한다.
1. css-loader 실행
2. style-loader 실행

file-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가 처리하는 파일을 모듈로 사용할 때 경로 앞에 추가되는 문자열이다.

url-loader

사용하는 이미지의 갯수가 많다면 네트워크 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 줄 수 있다.
만약 한 페이지에서 작은 이미지를 여러개 사용한다면 Data URI Scheme을 이용하는 방법이 더 낫다.

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를 사용하는 것이 효율적이다!