处理其他资源

在 webpack4，我们使用 file-loader、url-loader 来对图片进行处理。webpack5 提供了 asset module type 资源模块类型，可以替代一些处理资源的loader：raw-loader、file-loader、url-loader......

file-loader

file-loader 的作用就是帮助我们处理 import/require() 方式引入的一个文件资源，并且会将它放到我们输出的文件夹中

安装

bash

npm install file-loader -D

配置

{
    test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images' // 文件存放的路径
                }
            }
        ]
}

webpack 提供了 placeholder 来让我们实现一些功能，比如保留原来的文件名、扩展名、添加hash值防止重复。常见的 placeholder

[ext]：处理文件的扩展名；
[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
[contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
[hash:<length>]：截图hash的长度，默认32个字符太长了；
[path]：文件相对于webpack配置文件的路径；

url-loader

url-loader 可以用来将小的图片转成 base64 图片，减少不必要的请求，而大的图片也进行转换，反而会影响页面的请求速度，所以可以使用 limit 对转换进行限制

安装

bash

npm install url-loader -D

配置方式跟 file-loader 类似

{
    test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
            {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images' // 文件存放的路径
                    limit: 100 * 1024 // 100kb以下才被转换
                }
            }
        ]
}

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，并且配置资源体积限制实现

使用：

加载图片可以这样配置

{
    test: /\.(png|jpe?g|gif|svg)$/i,
    type: "asset/resource"
}

如果想要自定义文件名，有两种方式:

修改output，添加 assetModuleFilename 属性

output: {
    filename: '[name].js',
    path: resolve(__dirname, './dist'),
    assetModuleFilename: 'images/[name].[ext]'
}

在 Rule 中，添加 generator 属性，并设置 filename

{
    test: /\.(png|jpe?g|gif|svg)$/i,
    type: 'asset/resource',
    generator: {
        filename: 'images/[name].[hash:8][ext]'
    }
}

其他资源（字体文件、文档等静态资源）如何配置以及更多配置，比如如何设置 limit 转换为base64图片等，可以查找官网中的具体用法

处理其他资源 ​

file-loader ​

url-loader ​

asset module type (资源模块类型) ​

处理其他资源

file-loader

url-loader

asset module type (资源模块类型)