概述

相信小伙伴们都知道，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对图片完成真正的打包了。