webpack加载图片资源

加载图片资源

首先在src目录下创建一个新文件夹images，然后在其中放一张png图片

然后修改css文件内部样式并设置该png图片为背景图片

.test {
    width: 100px;
    height: 100px;
    background-image: url(../images/2024.png);
    background-size: cover;
}

然后在webpack.config.js中的module.rules中添加rule

{
	test: /\.png$/, //需要匹配的资源后缀
	type: "asset/resource", // 资源类型
    parser: { // 用于图片转换base64类型的规则
        dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会自动转换为base64格式
        }
	},
    // generator是输出指定输出路径的
    generator: {
    	filename: "static/images/[hash:10][ext][query]"
    }
}

最后运行打包命令npx webpack即可，刷新打开的项目网页即可看到效果