webpack5 已放弃维护url-loader
、file-loader
和raw-loader
,可使用asset module type
来替换这些loader
项目场景:
提示:webpack5引入图片,无非就2种方式——src引入、background-image引入
background-image引入
.image-bg {
background-image: url("../img/img1.jpg");
background-size: contain;
width: 200px;
height: 200px;
}
import '../css/style.css'
const bgDivEl = document.createElement('div');
bgDivEl.className = "image-bg";
document.body.appendChild(bgDivEl);
不使用file-loader的情况下,直接打包可正常显示
src引入
import img2 from '../img/img2.png'