webpack的内置资源模块
- 资源模块的 4 种类型
1、asset/resource 发送单独的文件并导出 url
2、asset/inline 导出 data url
3、asset/source 导出资源的源码
4、asset 在导出 url 和 data url 中自由的选择其中的一个
2.4 中资源类型的配置
// webpack.config.js
module.exports = {
entry: './main.js', // 资源文件需要使用 import ** from ** 导入到入口文件中
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist'),
assetModuleFilename: './images/[contenthash][ext]', // 配置资源文件的输出存放路径
},
module: {
rules: [
// 该类型会在dist中输出该png文件,并且入口文件导入得到的是该图片的url
{
test: '/\.png$/',
type: 'asset/resource',
generator: {
filename: 'image/[contenthash][ext]', // 配置资源文件的输出路径,该配置的优先级高于 output 中的 assetModuleFilename字段
}
},
// 该类型在入口文件中导入得到的是 data url,dist中不会输出该文件
{
test: '/\.svg$/',
type: 'asset/inline'
},
// 该类型在dist会输出该文件,该类型在入口文件导入得到的是该文件的内容
{
test: '/\.txt$/',
type: 'asset/source'
},
// 该类型会根据图片的大小入判断,如果默认情况下,图片小于 8k ,在入口文件中导入得到就是 data url,并且不会输出文件到 dist 文件夹。如果大于 8k ,在入口文件中导入得到就是 url,会输出文件到 dist 文件夹
{
test: '/\.jpg$/',
type: 'asset',
parser: {
dataUrlCondition: { // 图片转换成 data url 的条件
maxSize: 4*1024*1024, // 大小限定
}
}
}
]
}
}