webpack学习-加载图片，加载 SVG，使用 svg-inline-loader加载 Source Map优化 优化 loader 配置优化 resolve.modules 配置

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