webpack4配置之打包图片

webpack图片的处理需要设置file-loader或url-loader，否则打包含有图片的文件会报错。url-loader与file-loader区别在于url-loader当在处理一些达到设置好的图片大小的图片时，会将这些图片转换为DataUrl的形式，可以大大降低一部分请求。

url-loader依赖于file-loader，同时安装url-loader与file-loader：
cnpm i url-loader file-loader -D

配置webpack.config.js

rules: [
	...
	{
                test: /\.(bmp|png|jpg|jpeg|ico|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options:{
                            limit: 1024 * 10, // 文件小于10kb，输出DataUrl
                            outputPath: 'images', // 该路径相对于html输出路径
                            publicPath: '../../images',
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
]

打包错误消失，但是当你在页面中使用图片时，你会发现图片无法显示，这时需要借助html-loader解决这一问题。

cnpm i html-loader -D

{
	test: /\.html$/,
	use: [
		{
			loader: 'html-loader',
			options: {
				attrs: ['img:src', 'img:data-src', 'audio:src'],
				minimize: false,
			}
		}
	]
},