webpack asset modules(file-loader) v5

asset modules 는 로더를 추가로 구성하지 않아도 asset 파일 (폰트, 아이콘 등)을 사용할 수 있도록 해주는 모듈

webpack 5 이전에는

• raw-loader : 파일을 문자열로 가져올 때
• url-loader : 파일을 data URI 형식으로 번들에 인라인 추가할 때
• file-loader : 파일을 출력 디렉터리로 내보낼 때

로더를 사용하는 것이 일반적이었다.

webpack 5에서는 이러한 로더를 대체하기 위해 asset module에 4개의 새로운 모듈 유형이 추가되었다.

• asset/resource : 별도의 파일을 내보내고 URL을 추출 (file-loader 대체)
• asset/inline : asset의 data URI를 내보낸다. (url-loader 대체)
• asset/source : asset의 소스 코드를 내보낸다. (raw-loader 대체)
• asset은 data URI와 별도의 파일 내보내기 중에서 자동으로 선택

css 에서 사용하는 이미지는 자동으로 번들링 해주기 때문에 별도의 설정을 해주지 않아도 되지만 image 파일을 js파일에서 import 하려면 모듈화를 위해서 webpack.config.js파일을 수정해주어야 한다.

{
  test: /\.(png|jpe?g)$/,
  // webpack에서 기본으로 제공하는 asset module을 사용하기 때문에 use가 아닌 type으로 설정
  type: "asset" // 기본으로 설정되어있는 8kb를 기준으로 asset/inline과 asset/resource 중 자동으로 선택
  // type: "asset/resource"  v4에서 file-loader
  // type: "asset/inline"    v4에서 url-loader
}

 

webpack은 기본 조건에 따라서 resource와 inline 중에서 자동으로 선택한다. 크기가 8kb 미만인 파일은 inline 모듈로 처리되고 그렇지 않으면 resource 모듈로 처리된다.

다음과 같이 설정한다면 기본 조건을 변경할 수 있다.

{
  test: /\.(png|jpe?g)$/,
  type: "asset",
  parser: {
    dataUrlCondition: {
      maxSize: 4 * 1024,
    },
  },
}