Webpack 5 新特性：Asset Modules 资源模块配置指南

正文

webpack 能够将多种类型的文件写入最终的js文件中，实现写入的方式包含两种，分别是 Asset Modules 以及 Loaders

本篇内容旨在探讨 Asset Modules。Asset Modules（资源模块）作为webpack5引入的新特性，使得开发者可以直接使用资源文件（如字体、图标等）而无需额外配置 loader，关于 webpack 低版本的处理方式及更多详情可参考官方文档。

资源模块类型（asset module type）通过新增 4 种模块类型来扩展功能，以下引用官方文档内容直接进行介绍。

asset/resource 会发送单独的文件并导出 URL，此前该功能通过 file-loader 实现。
asset/inline 会导出资源的 data URI，此前该功能通过 url-loader 实现。
asset/source 会导出资源的源代码，此前该功能通过 raw-loader 实现。
asset 会在导出 data URI 和发送单独文件之间自动进行选择，此前该功能通过 url-loader 并配置资源体积限制来实现。

图片打包（asset/resource）

将一张图片（jpg/png/jpeg）放置于工程文件夹内，随后编写一个加载图片的函数，该函数会生成一个图片元素，设置其 src 等属性，最后将其挂载到 body 上。文件目录结构如下所示

src/
    addImg.js
    cat.jpeg
    index.js

addImg.js 的具体内容如下

import CatImg from './cat.jpeg';
function addImg () {
    const img = document.createElement('img');
    img.alt = 'Cat';
    img.width = 300;
    img.src = CatImg;
    const body = document.querySelector('body');
    body.appendChild(img);
}
export default addImg;

此处import了一个jpeg后缀的文件，由于webpack默认不知道如何处理此类文件，因此我们需要通过wepack.config.js进行配置

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist') 
    },
    mode: 'none',
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg)/,
                type: 'asset/resource'
            }
        ]
    }
}

执行npm run build后在浏览器中打开 html 文件，可以发现图片已在页面上渲染，同时观察打包后的 dist 文件夹，图片数据也存在于其中，这便是以assert/resource方式打包的结果，简而言之，图片打包进入了dist文件夹，这与后续的asset/inline（后文将介绍）方式存在直接区别。

publicPath

刚才打包的结果，若打开浏览器控制台，可以看到 img 元素的 src 地址指向了一个本地的绝对路径

该路径是如何指定的呢？它是通过output属性下的publicPath来确定的，其默认值为 "auto"，可以尝试配置 output 属性下的publicPath: "auto"，其打包结果与刚才一致，那么如果希望使用相对路径，在本例中使用 html 文件的相对路径去指定图片的 src publicPath: 'dist/'，打包后同样可以成功渲染图片，但观察其 img 的 src 指向已发生变化，使用的是相对路径。

例如在实际项目中，静态资源通常会打包到cdn服务器上，此时可以配置 publicPath 为一个具体的cdn地址，例如 http://somecdn.com/someasset/，那么其静态资源路径前缀就会是这个地址。

asset/inline 模块

接着上面的部分，inline主要区别于 resource的地方在于打包结果，inline 会将文件直接以base64的方式写入最后产出的 bundle.js 中。一般情况下，对于一些svg文件使用inline的方式打包是比较合理的，当然对于较大的图片也不是不行，只不过最后 bundle.js 的体积会变大，这在生产环境中并不是很理想。

改写对于图片类数据打包的方式为 type: 'asset/inline'，可以从控制台看出打出的包体积变大了，且打开 bundle.js 查看的话会看见base64的部分

那么结论就是这两种打包方式各有利弊，inline 虽然把数据写入到js文件中，但也减少了一次网络请求。还是要根据实际的生产需求来决策，理论上一些小的sv要写到bundle中，而大图是分包部署在cdn服务上比较合理。

asset 模块

上面的两种设定都指定了一种绝对的方法，那么有没有更灵活的方式呢？就是asset类型的处理方式。将图片文件处理的方式改为 type: 'asset'，这会根据资源的大小来决定是以 inline 的方式还是以 resource 的方式进行打包，其默认值阀值是8kb，如果文件大小小于8kb，那么文件将以inline的方式进行打包，反之则相当于recource的方式。当然我也可以改写阈值:

module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg)/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 3 * 1024 // 3kb
                    }
                }
            }
        ]
    }