概述
相信小伙伴们都知道，Webpack本身只能识别js模块，因此像图片这种非js的资源，需要在webpack.config.js文件中配置相应的loader来实现打包。项目中最常见的两种使用图片的方式为：
1、作为某些html元素的背景图；
2、img标签引入；
针对以上两个方式，我们需要进行相应的配置。首先我们来解决第一种情况，针对第一种情况，解决过程如下：
1、安装两个包：url-loader，file-loader（url-loader依赖file-loader）；
2、在webpack.config.js中添加相应配置，代码如下：
module: { // loader的配置
rules: [
// 处理图片资源, 这种方式默认处理不了html文档中使用img标签定义的图片
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 图片小于 8kb，就会被base64处理
// base64优点：base64可以减少请求数量（减轻服务器压力）
// base64缺点：图片体积会比原来大一点（文件请求速度会更慢）
limit:8 *1024,
name:'[hash:10].[ext]' // 图片重命名
}
}
]
}
接下来我们来解决第二个问题，当我们在html模版中，使用img标签引入了图片，如下所示：
这时候光是使用url-loader是无法完整打包的，在最后输出的html文件中，img的链接还是'./src/assets/angular.jpg'。要解决这个问题，我们需要使用html-loader，这个loader用来处理html文件里面的img图片，使其能被url-loader进行打包。webpack配置如下：
{
test: /\.html$/,
loader: 'html-loader'
}
配置进行打包以后，我们会发现还是不行，我们会发现img标签里面src的值变成了[object Module]。这是因为url-loader默认使用es6模块化去解析，而html-loader引入图片是commonjs，所以我们需要关闭url-loader的es6模块化，使用commonjs解析！
所以我们需要另外加一个配置，这配置是加在url-loader里面的，代码如下：
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
esModule: false // 关闭url-loader的es6模块化，使用commonjs解析
}
}
结语
完成以上配置，我们就能用webpack对图片完成真正的打包了。
