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

resource

导出单独文件，例如图片

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  entry:"./src/index.js",
  output:{
    filename:"bundle.js",
    path:path.resolve(__dirname,"./dist"),
    clean:true,
    // 定义资源文件名，和路径
    // 通过[contenthash]自动生成文件名
    // [ext]自动生成扩展名
    assetModuleFilename:"images/[contenthash][ext]"
  },
  mode:"development",
  devtool:"inline-source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template:"./index.html",
      filename:"app.html",
      inject:"body"
    })
  ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      {
        // 通过正则来定义我们加载的文件类型，
        // 表示以png
        test:/\.png$/,
        // 定义资源类型
        type:"asset/resource",
        // 配置资源文件生成位置和名称
        // generator配置的优先级高于在output中配置的assetModuleFilename
        // 两者作用类似，但generator优先级更高
        generator:{
          filename:"images/[contenthash][ext]"
        }
      }
    ]
  }
}

打包后的资源文件，将会由系统自动生成一个名称，并放到dist下
通过在output中定义属性assetModuleFilename：”images/test.png”，
这之后打包的资源文件将会放到dist/images 文件下面，文件名交test.png

通过[contenthash]生成不同的文件名，[ext]自动生成扩展名

第二种配置资源文件位置和名称的方式
在module 的rules下面的对象中配置generator

inline

导出资源的Data URL

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  // entry:"./src/index.js",
  // output:{
  //   filename:"bundle.js",
  //   path:path.resolve(__dirname,"./dist"),
  //   clean:true,
  //   assetModuleFilename:"images/[contenthash][ext]"
  // },
  // mode:"development",
  // devtool:"inline-source-map",
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template:"./index.html",
  //     filename:"app.html",
  //     inject:"body"
  //   })
  // ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      {
        test:/\.png$/,
        type:"asset/resource",
        generator:{
          filename:"images/[contenthash][ext]"
        }
      },
      {
        test:/\.svg$/,
        type:"asset/inline",
      }
    ]
  }
}

将类似与svg这样的文件，当作资源显示到网页上

打包后不会出现在dist文件中，需要通过浏览器才能看见，在网页中是以base64的格式显示的

source

用于导出资源的源代码URL
例如将文本内容生成一个URL

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  // entry:"./src/index.js",
  // output:{
  //   filename:"bundle.js",
  //   path:path.resolve(__dirname,"./dist"),
  //   clean:true,
  //   assetModuleFilename:"images/[contenthash][ext]"
  // },
  // mode:"development",
  // devtool:"inline-source-map",
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template:"./index.html",
  //     filename:"app.html",
  //     inject:"body"
  //   })
  // ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      {
        test:/\.png$/,
        type:"asset/resource",
        generator:{
          filename:"images/[contenthash][ext]"
        }
      },
      {
        test:/\.svg$/,
        type:"asset/inline",
      },
      {
        test:/\.txt$/,
        type:"asset/source",
      }
    ]
  }
}

引入使用：

不会打包成文件放到dist中，
在网页中会显示资源文件中的源信息，及文件中有什么网页就显示什么

asset（通用数据类型）

在导出一个Data URL和发送一个单独文件之间自动进行选择，也就是在asset/inline和asset/resource之间先择

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  // entry:"./src/index.js",
  // output:{
  //   filename:"bundle.js",
  //   path:path.resolve(__dirname,"./dist"),
  //   clean:true,
  //   assetModuleFilename:"images/[contenthash][ext]"
  // },
  // mode:"development",
  // devtool:"inline-source-map",
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template:"./index.html",
  //     filename:"app.html",
  //     inject:"body"
  //   })
  // ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      {
        test:/\.png$/,
        type:"asset/resource",
        generator:{
          filename:"images/[contenthash][ext]"
        }
      },
      {
        test:/\.svg$/,
        type:"asset/inline",
      },
      {
        test:/\.txt$/,
        type:"asset/source",
      },
      {
        test:/\.jpg$/,
        type:"asset",
        // 解析器
        parser:{
          // 定义是否生成URL的临界值，当文件大于时创建，反之生成URL
          dataUrlCondition:{
            maxSize:4*1024*1024
          }
        }
      }
    ]
  }
}

同样导入后使用：

打包后。因为在output中配置了打包后资源文件的路径，所以会在dist/imags中生成一个.jpg的图片

默认情况下当一个资源文件小于8k时会选择inline的方，生成一个base64的链接，大于8k时会使用resource创建一个资源

通过设置parser将临界条件修改，如下：

当资源文件大于4M时才会创建一个资源，小于时会生成一个URL
生成URL时不会在dist文件中创建资源，需要通过浏览器查看URL和渲染效果

webpack5-资源模块

resource

inline

source

asset（通用数据类型）