로더

로더의 역할

• 웹팩은 모든 파일(JS, CSS, 이미지, 폰트 등)을 모듈로서 바라보기 때문에, import 키워드를 통해 자바스크립트 코드 안으로 가져올 수 있게 해준다
• 타입스크립트같은 다른 언어를 자바스크립트 문법으로 변환해준다
• 이미지를 data URL 형식의 string으로 변환한다
• CSS 파일을 자바스크립트에서 직접 로딩할 수 있게 해준다

로더 모듈 만들기

// my-webpack-loader.js
// loader는 함수 형태로 작성
module.exports = function MyWebpackLoader (content) {
	console.log('test');
}

자주 사용하는 로더

Css-loader

• css file을 javascript 모듈처럼 사용할 수 있도록 처리해주는 로더

style-loader

javascript 모듈로 변환된 css 파일을 html에 넣어주는 로더 (브라우저에 적용시켜줌)

npm install style-loader css-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // 배열 역순으로 실행된다
      },
    ],
  },
}

file-loader

• css 뿐만 아니라 사용하는 모든 파일을 모듈로 사용할 수 있도록 해주는 로더

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/, // .png 확장자로 마치는 모든 파일
        loader: "file-loader",
        options: {
          publicPath: "./dist/", // prefix를 아웃풋 경로로 지정
          name: "[name].[ext]?[hash]", // 파일명 형식
        },
      },
    ],
  },
}

url-loader

• 이미지를 base64로 인코딩하여 문자열 형태로 소스코드에 넣어주는 로더
• options에서 파일 크기의 제한을 걸어 nkb 미만일 경우 data url로 처리해주는 로직을 넣을 수 있다

{
  test: /\.png$/,
  use: {
    loader: 'url-loader', // url 로더를 설정한다
    options: {
      publicPath: './dist/', // file-loader와 동일
      name: '[name].[ext]?[hash]', // file-loader와 동일
      limit: 5000 // 5kb 미만 파일만 data url로 처리
    }
  }
}

아이콘 처럼 용량이 작거나, 사용 빈도가 높은 이미지는 파일 그대로 사용하기보다는 data uri scheme을 적용하는 것이 좋다.