3-19 加载图片
在网页中不可避免的会依赖图片资源,例如 PNG、JPG、GIF,下面来教你如何用 Webpack 加载图片资源。
使用 file-loader
file-loader 可以把 JavaScript 和 CSS 中导入图片的语句替换成正确的地址,并同时把文件输出到对应的位置。
例如 CSS 源码是这样写的:
#app {
background-image: url(./imgs/a.png);
}
被 file-loader 转换后输出的 CSS 会变成这样:
#app {
background-image: url(5556e1251a78c5afda9ee7dd06ad109b.png);
}
并且在输出目录 dist 中也多出 ./imgs/a.png 对应的图片文件 5556e1251a78c5afda9ee7dd06ad109b.p