webpack的几种资源模块

当使用webpack打包除了代码文件外的其他静态资源，如图片、文本等时，可以配置webpack自带的资源模块规则进行对应的打包，替代webpack4时期的loader方式。

resource资源

resource是将资源以文件的形式打包到项目目录下，然后在对应的引用处生成文件的链接，例如例子中的1.png会被打包到dist文件夹下

配置方式如下：

module: {
        rules: [
            {
                test: /\.png$/,
                type: 'asset/resource'
            },
            ]
}

inline资源

inline的模式是将资源变成默认为base64编码的形式加入到项目中，不会生成文件，比如图片、svg等，配置方式如下：

module: {
        rules: [
            {
                test: /\.jpg$/,
                type: 'asset/inline'
            },
        ]
    },

source资源

source的形式是将资源的内容原样应用到项目中，不生成文件，只利用内容，例如下方的a.txt这个文件，打包后不生成文件，但是内容会被放到div中


配置方式如下：

module: {
        rules: [
            {
                test: /\.txt$/,
                type: 'asset/source'
            },   
        ]
    },

asset通用资源类型

现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。可以通过在 webpack 配置的 module rule 层级中，设置 Rule.parser.dataUrlCondition.maxSize 选项来修改此条件：

module: {
        rules: [
            {
                test: /\.jpg$/,
                type: 'asset',
                // parser: {
                //     // dataUrlCondition: {
                //     //     maxSize: 1024 * 1024
                //     // }
                // }
            },
        ]
    },