Webpack asset module

webpack asset module

webpack v5 이전에는 raw-loader, file-loader, url-loader들을 이용해서 파일들을 가져왔는데, v5부터는 내장되어 있는 asset모듈에 4가지 새로운 모듈 유형이 추가됐다.

• 모듈 유형

  • asset/resource : 별도의 파일을 내보내고 URL을 추출(=file-loader)
  • asset/inline : 에셋의 data URL를 내보냄(= url-lodaer)
  • asset/source : 에셋의 소스 코드를 내보냄(= raw-loader)
  • asset : data-url과 파일 내보내기 중에서 자동으로 선택. 이전에는 애셋 크기 제한이 있는 url-loader를 사용

• 파일 이름은 기본적으로 [hash][text][query] 파일명을 사용, assetModuleFilename으로 수정 가능

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

• asset 타입 시 resource, inline 중 선택 사이즈는 8kb 미만은 inline

  최대 크기는 아래와 같이 바꿀 수 있다

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.txt/,
          type: 'asset',
          parser: {
           	dataUrlCondition: {
              maxSize: 4 * 1024 // 4kb
            }
          }
        }
      ]
    },
  };

Url-loader, file-loader 차이

• Data Url

  • Data url은 HTML document에 인라인으로 데이터를 제공할 수 있는 URL scheme

  • 파일은 따로 request를 보내지만, url은 보내지 않는다.

  • data:[<mediatype>][;base64],<data>
    

  • 파이어폭스는 기본적으로 길이 제한이 없는 data URIs를 지원하지만, 브라우저들은 데이터의 개별적인 최대 길이를 제공해야 할 의무가 없습니다. 예를 들어, 오페라 11 브라우저는 data URL을 65529 문자로 제한하는 65535 개의 character long으로 제한합니다(MIME 타입을 지정하지 않고 plain data를 사용한다면, 소스가 아닌 인코딩된 데이터의 길이는 65529자가 됩니다).

• url-loader은 에셋 파일들을 data url로 바꿔준다.

  • limit으로 크기를 정해줄 수 있다.(용량의 크기가 크면 file-loader로 처리)

• file-loader는 에셋들을 파일에 대한 Url을 주어진다

• 이미지가 작은 경우는 url-loader를 쓰면 불필요한 요청을 줄일 수 있다. 하지만, data url이 추가되기 때문에 번들사이즈가 커지는 단점이 있는데, 적절하게 잘 섞어서 사용해야할 것 같다.

참고

• https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
• https://jeonghwan-kim.github.io/js/2017/05/22/webpack-file-loader.html
• https://webpack.kr/guides/asset-modules/