[Webpack] file-loader, url-loader

Webpack 4

file-loader

module.rules에 다음과 같이 설정했었습니다.

별도로 file-loader를 설치해야 합니다.

  {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          publicPath: './dist/',
          name: '[name].[ext]?[hash]'
        }
      }

output.path 프로퍼티에 설정한 경로에 번들링된 파일이 위치하게 됩니다.

 

url-loader

이는 dataURI 스킴을 처리하는 로더입니다.

작고 여러 개인 이미지에 대한 http 요청을 줄여야 할 때 사용을 고려해볼 수 있습니다.

별도의 url-loader를 설치해야 합니다.

다음처럼 설정하면 2kb 미만의 이미지 파일은 base64로 인코딩 되어 html에서 관리됩니다.

2kb 이상의 파일은 dataURI로 처리되지 않고 파일로 처리됩니다.

      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          publicPath: './dist/',
          name: '[name].[ext]?[hash]',
          limit: 2000 // 2kb
        }
      }

번들 파일을 보면 인코딩된 문자열을 확인할 수 있으며 output 폴더인 dist에도 해당 파일은 존재하지 않게 됩니다.

 

Webpack 5

raw-loader, url-loader, file-loader가 내장되어 있습니다.

각각 타입을 주어 처리할 수 있습니다.

file-loader로 처리하던 것을 asset/resource,

url-loader로 처리하던 것을 asset/inline,

raw-loader로 처리하던 것을 asset/source.

 

options 프로퍼티가 사라졌으므로 그 안에서 했던 설정도 다르게 해줘야 합니다.

publicPath가 필요하다면 generator 프로퍼티 안에 넣어주면 되는데,

굳이 넣지 않아도 되는 것 같습니다.

필요하다면 output.assetModuleFilename 프로퍼티 앞에 추가해주면 됩니다.

아래는 공식문서의 예제입니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
};

 

여기에서는 다음과 같이 변경했습니다.

output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js', // 동적으로 entry의 키값을 가져온다
    assetModuleFilename: '[name].[ext]?[hash]',
  },
  // ...
  
  module: {
  	rules: [
      {
          test: /\.(jpg|png)/,
          type: 'asset/resource'         
      },
    ]    
 }

파일 이름이 다음과 같이 설정됩니다.

 

특정 용량 미만일 경우 dataURL로 처리하고 싶다면 asset 타입을 사용하면 됩니다.

 {
        test: /\.(jpg|png)/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },

 

 

< 참고 >

https://webpack.kr/guides/asset-modules/#general-asset-type

https://webpack.kr/guides/asset-modules/