assetModules

webpack5

webpack5 内置 Asset Modules，用来处理各类资源：

const svgToMiniDataURI = require('mini-svg-data-uri')
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 8 * 1024    // 8kb
                    }
                }
            },
            {
                test: /\.html/,
                type: "asset/resource",
                generator: {
                    filename: 'static/[hash][ext][query]'    // 会被输出到 ${output}/static 下
                }
            },
            {
                test: /\.svg/,
                type: "asset/inline",    // 转成 Data URI
                generator: {
                    dataUrl: content => {
                        content = content.toString()
                        return svgToMiniDataURI(content)
                    }
                }
            },
            {
                test: /\.txt/,
                type: "asset/source"    // 会将源代码打进 bundle
            }
        ]
    }
}

type

• "asset/resource": 把资源作为一个文件输出到 ouput 目录，默认输出文件名 [hash][ext][query] 。
• "asset/inline": 把资源处理成 Data URL 的形式内联到 bundle。
• "asset/source": 把资源处理成源代码打进 bundle。
• "asset": 自动选择使用 "asset/inline" 或者 "asset/resource"。

generator

• generator.filename 可以用来指定 "asset/resource" 输出的目录和文件名；只对 "asset/resource" 和 "asset" 类型生效。

parser

• parser.dataUrlCondition.maxSize 用来指定 "asset" 类型自动选择的条件，大于这个值的文件按 "asset/resource" 处理，否则按 "asset/inline" 处理。

自定义 asset 文件名

还可以修改 ouput.assetModuleFilename 来自定义 asset/resource 输出的文件名。

自定义 Data URL 处理器

默认情况下，data URL 用 base64 加密，可以指定 generator.dataUrl 来自定义其他加密算法。