资源模块是 webpack5 新引入的特征

    功能：资源模块是一种模块类型，它允许使用资源文件(字体、图片、图标、html…)，而无需配置额外 loader
    概括一句话：不用 file-loader、url-loader 也能加载图片或字体

    官方地址：http://webpack.docschina.org/guides/asset-modules/

    webpack4

    raw-loader 将文件导入为字符串

    file-loader 将文件发送到输出目录

    url-loader 将文件发送到输出目录，或转为 DataURL 内联到 bundle 中

    webpack5

    • asset/resource 发送一个单独的文件并导出 URL( file-loader )
    • asset/inline 导出一个资源的 dataURL ( url-loader )
    • asset/source 导出资源的源代码 ( raw-loader )
    • asset 在导出一个 dataUrl 和发送一个单独的文件之间自动选择 ( url-loader )

    用法：

    2. module.exports = {
    3.     module: {
    4.         rules: [
    5.             {
    6.                 test: /\.png$/,
    7.                 type: 'asset/resource',
    8.                   // 设置输出文件名，注意[ext]前面是没有点.的，与 loader 的有差别
    9.                 generator: {
    10.                     filename: 'assets/images/[contenthash][ext]'
    11.                 }
    12.             },
    13.             {
    14.                 test: /\.svg$/,
    15.                 type: 'asset/inline'
    16.             },
    17.             {
    18.                 test: /\.jpg$/,
    19.                   // asset 可以在 asset/resource 和 asset/inline 之间选择
    20.                   // 如果文件小于 8kb，使用asset/inline
    21.                   // 如果文件小于 8kb，使用asset/resource
    22.                 type: 'asset',
    23.                       // 可以设置约定文件大小
    24.                 parser: {
    25.                     dataUrlCondition: {
    26.                         maxSize: 4 * 1024 * 1024
    27.                     }
    28.                 }
    29.             },
    30.             {
    31.                 test: /\.txt/,
    32.                 type: 'asset/source'
    33.             }
    34.         ]
    35.     }
    36. }