AssetModules

介绍

官方说明：https://webpack.docschina.org/guides/asset-modules

该方法需将资源在 JS 中通过 import 进行导入或 css 中进行导入

// js 文件导入
import 命名 from '资源路径'

// css 文件引用
.box {
  background-image: url('资源路径');
}

资源模块类型

• asset/resource：发送一个单独的文件并导出 URL
• asset/inline：导出一个资源的 Data URI ( 64 位图 )
• asset/source：导出资源的源代码
• asset：在导出一个资源的 Data URI 和发送一个单独的文件之间自动进行选择

resource

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.png$/i,
        // 设置资源类型
        type: 'asset/resource',
        generator: {
          // 生成资源名称
          filename: 'assets/images/[name][ext]'
        }
      }
    ]
  }
}

资源名称可以使用 [contenthash][ext] 将资源名称生成为 hash 值命名

inline

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.svg$/i,
        // 设置资源类型
        type: 'asset/inline'
      }
    ]
  }
}

source

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.txt$/i,
        // 设置资源类型
        type: 'source'
      }
    ]
  }
}

asset

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.jpg$/i,
        // 设置资源类型
        type: 'asset',
        // 小于设置的大小则转为 64 位图，否则转 URL
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb
          }
        },
        generator: {
          // 生成资源名称
          filename: 'assets/images/[name][ext]'
        }
      }
    ]
  }
}