webpack5的资源处理（asset modules）

asset-modules

webpack5 之前我们处理静态资源比如。图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。

webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。

asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
asset/inline 将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.
asset/source 将资源导出为源码（source code）. 之前的 raw-loader 功能.
asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现。

使用方法：

const path = require('path');

module.exports = {
     
	entry: './src/index.js',
	output: {
     
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist'),
		assetModuleFilename: 'images/[hash][ext][query]', // 指定导出的文件名
	},
	module: {
     
		rules: [
			{
     
				test: /\.png/,
				type: 'asset/resource'
			},
			{
     
				test: /\.html/,
				type: 'asset/resource',
				generator: {
     
					filename: 'static/[hash][ext][query]'  // 单独指定 名字
				}
			},
			{
     
				test: /\.svg/,
				type: 'asset/inline'  // inline 的时候不需要指定文件名
			},
			{
     
				test: /\.txt/,
				type: 'asset',
				parser: {
     
					dataUrlCondition: {
     
						maxSize: 4 * 1024 // 4kb  指定大小
					}
				}
			}
		]
	},
};