前言

资源模块可以帮助我们打包不同类型的资源文件，例如：图片，字体
资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

前期准备

我们现在src文件夹里放入asset文件夹，内部装有我们需要的资源文件.jpg .png .webp图片以及.ttf和.txt文件

1. Resource 资源

resource 会发送一个单独的文件并导出 URL

const path = require("path")
const HtmlWebpackPulgin = require("html-webpack-plugin")
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    clean: true,
    // assetModuleFilename控制输出文件的文件名，还能指定目录（优先级低于generator）
    // [contenthash]：webpack自带的 自动生成名字
    // [ext]：webpack自带的 保留源文件扩展名
    assetModuleFilename: 'images/[contenthash][ext]'
  },
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPulgin({
      // html的模板
      template: './index.html',
      // 导出html文件的名字
      filename: 'app.html',
      // 让 js 文件在 body标签 内被引入
      inject: 'body'
    }),
    new MiniCssExtractPlugin({
      filename: 'style/[contenthash].css'
    }),
    new CssMinimizerPlugin()
  ],
  devServer: {
    static: './dist',
    hot: true,
  },
  // asset.moudle 资源模块（允许我们打包除 JS 以外的文件，比如字体，图片等）
  // 其内部有四种新的资源模块，替换所有的 loader
  // (1) asset / resource 发送一个单独文件并导出URL
  // (2) asset / inline 导出一个资源的dataURL
  // (3) asset / source 导出一个资源的源代码
  // (4) asset 会在 resource 和 inline 之间自动选择
  // loader：通过loader我们也可以加载资源文件
  //  style-loader 和 css-loader，通过这两个我们可以实现CSS文件的加载
  module: {
    rules: [
      {
        // 会单独生成一个文件，并且在浏览器上能看到导出的路径
        // http://localhost:8080/images/92f14689885b0e09af6d.jpg
        test: /\.jpg$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[contenthash][ext]'
        }
      },
   }
}

// index.js
import { helloworld } from "./helloworld";
import imgsrc_1 from './asset/云谨.jpg'
helloworld()
const img_1 = document.createElement('img')
img_1.src = imgsrc_1
img_1.style.cssText = 'width:100px; height:100px;'
document.body.appendChild(img_1)

自定义输出文件名

默认情况下，asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录。
（1） webpack 配置中设置 output.assetModuleFilename 来修改此模板字符串

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, './dist'),
  clean: true,
  // assetModuleFilename控制输出文件的文件名，还能指定目录（优先级低于generator）
  // [contenthash]：webpack自带的 自动生成名字
  // [ext]：webpack自带的 保留源文件扩展名
  assetModuleFilename: 'images/[contenthash][ext]'
},

（2）另一种自定义输出文件名的方式是，将某些资源发送到指定目录

{
  test: /\.jpg$/i,
  type: 'asset/resource',
  // generator.filename配置输出文件名
  generator: {
    filename: 'images/[contenthash][ext]'
  }
},

配置好之后，我们npx webpack运行

2. Inline 资源

只需要修改一下配置

module: {
    rules: [
      {
        // 不会生成文件，但是在浏览器上能看到，路径是由一个base64的dataURL组成
        //     data:image/png;base64,/9j/4AAQSkZJRgABAgEASABIAAD/…e1KjUqUqUW+vJTjCmu0IQj8MUl/TzXnHMFABQAUAFABQB/9k=
        test: /\.jpg$/i,
        type: 'asset/inline',
        generator: {
          filename: 'images/[contenthash][ext]'
        }
      },
   }

没有生成额外的文件

3. Source 资源

module: {
 rules: [
   {
     // 导出一个资源的源代码
     test: /\.txt$/i,
     type: 'asset/source',
   },
}

// index.js
import example from './asset/example.txt'
const box = document.createElement('div')
box.textContent = example
box.style.cssText = 'width:100px; height:100px;border:1px solid;'
document.body.appendChild(box)

// example.txt
godvoid6666
<h1>2233</h1>

直接把源码输出到了页面上

4. Asset 通用资源类型

webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
可以通过在 webpack 配置的 module rule 层级中，设置 Rule.parser.dataUrlCondition.maxSize 选项来修改此条件：

{
  // 在 resource 和 inline 之间自动选择
  // 没有指定 generator，会继承 output 内的 assetModuleFilename
  // 如何进行选择：（默认的大小是 8KB）
  // 当 文件大小 > 指定的大小时 => resource（创建一个单独文件）
  // 当 文件大小 < 指定的大小时 => inline（dataURL） 
  test: /\.webp$/i,
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 4 * 1024 // 4K ， 生成文件
      // maxSize: 4 * 1024 *1024  4M ， 生成 dataURL 
    }
  }
},

webpack学习

四、asset.moudle资源模块