当使用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
// // }
// }
},
]
},