webpack的内置资源模块

webpack的内置资源模块

1. 资源模块的 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, // 大小限定
					}
				}				
			}
		]
	}
}