加载图片资源
首先在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
即可,刷新打开的项目网页即可看到效果