Jico

Asset Modules Of Webpack5

2021/12/16 Webpack 共 1878 字，约 6 分钟

Asset Modules is a type of module that allows one to use asset files(fonts, icons, etc) without configuring addtional loaders.asset-modules

asset-module

custome output filename

1、by setting output.assetModuleFilename

module.exports = {
  output: {
    assetModuleFilename: 'assets/[hash][ext][query]',
  }
}

2、by setting loader generator.filename

module.exports = {
  module: {
    rules: [
      {
        test: /\.html/,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext]?[hash:8]',
        }
      }
    ]
  }
}

asset type 的区别

启动一个最简单的例子，看直观看一下dist文件的区别。前期准备：

// webpack core

// main.js
import './test.text'

// test.text
this is test text!

1、asset/inline

  • 将test.text的文件内容，采用data URI的形式进行了inline输出。
// webpack core
module.exports = {
  module: {
    rules: [
      {
        test: /\.text$/,
        type: 'asset/inline',
      }
    ]
  }
}

// output
(()=>{"use strict";var r={709:r=>{r.exports="data:text/plain;base64,dGhpcyBpcyB0ZXN0IHRleHQh"}},t={};function e(p){var s=t[p];if(void 0!==s)return s.exports;var a=t[p]={exports:{}};return r[p](a,a.exports,e),a.exports}e(709)})();

2、asset/resource

  • 对test.text做了rename操作，并导出URL
  • 将test.text文件输出到了dist目录
// webpack core
module.exports = {
  module: {
    rules: [
      {
        test: /\.text$/,
        type: 'asset/resource',
        generator: {
          filename: '[hash][ext]?[query]',
        }
      }
    ]
  }
}

// output
(()=>{"use strict";var t={706:(t,r,e)=>{t.exports=e.p+"test.text?fea5d322"}},r={};function e(s){var o=r[s];if(void 0!==o)return o.exports;var p=r[s]={exports:{}};return t[s](p,p.exports,e),p.exports}e.p="",e(706)})();

3、asset/source

  • 将test.text的文件内容直接进行了导出
// webpack core
module.exports = {
  module: {
    rules: [
      {
        test: /\.text$/,
        type: 'asset/source',
        generator: {
          filename: '[hash][ext]?[query]',
        }
      }
    ]
  }
}

// output
(()=>{"use strict";var t={345:t=>{t.exports="this is test text!"}},r={};function e(s){var o=r[s];if(void 0!==o)return o.exports;var i=r[s]={exports:{}};return t[s](i,i.exports,e),i.exports}e(345)})();

4、asset

  • 通过maxSize自动选择是resource模式还是inlinedataURI模式
// webpack core
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 1 * 1024, // 1kb
          }
        },
      }
    ]
  }
}

// output auto

Search

    Table of Contents