webpack5 学习 4 -- 解析 图片与字体资源

解析 图片与字体资源

file-loader 用于处理文件，所以图片与字体资源都采用 file-loader进行解析

url-loader 也可以解析图片与字体资源，它还有一个额外的功能，可以设置较小资源自动 base64

使用 file-loader 进行解析

加载依赖插件

npm i file-loader -D

加入loader

module: {
    rules: [
    // 解析图片
       {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    'file-loader'
                ]
            }，
            // 解析字体资源
       {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
    ]
}

使用 url-loader 进行解析

加载依赖插件

npm i url-loader -D

加入loader

module: {
    rules: [
    // 解析图片
       {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: { // 参数
                            limit: 10240
                        }
                    }
                ]
            }，
       
    ]
}

使用 webpack5 新增的 Assets Module

• asset/resource 发出一个单独的文件并导出 URL。以前可以通过使用 file-loader 实现
• asset/inline 导出资产的数据 URI。以前可以通过使用 url-loader 实现(默认base64)
• asset/source 导出资产的源代码。以前可以通过使用 raw-loader 实现
• asset 自动在导出数据 URI 和发出单独的文件之间进行选择。以前可以通过使用 url-loader 资产大小限制来实现。

{
                test: /\.(png|jpg|jpeg|gif)$/,
                type: 'asset',
                // 在生成器中我们可以给文件名添加指纹
                generator: {
                    filename: '[name]_[hash][ext][query]',  
                  },
                  // 在解析器中，我们定义文件体积，超出使用 asset/resource, 否则 asset/inline
                  parser: {
                    dataUrlCondition: {
                      maxSize: 4 * 1024 // 4kb
                    }
                  }
            },