webpack：使用html-withimg-loader对html中img标签引入的图片打包，打包后图片无法显示，路径上多出default对象

webpack，使用html-withimg-loader打包img图片，打包后图片无法显示，路径上多出default的一个对象。

前面会进行img图片打包的配置安装和介绍。对于已了解的，想直接解决问题的实用党，可跳过第一部分，直接看第二部分代码。

第一部分：插件安装和配置介绍（本人目前使用的配置）

在使用webpack进行打包时，使用url-loader打包的是样式文件中的背景图片，如less、css等。而使用html-webpack-plugin插件打包的html文件中的img标签上的图片是无法被打包的。在这里可以使用html-withimg-loader配合html-webpack-plugin插件和url-loader，将html文件里img标签上的图片打包。实际配置代码如下：

1.安装html-webpack-plugin插件 npm i html-webpack-plugin -D
2.在 webpack.config.js 中的 plugins 节点下配置
// 引入html 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins:[ // 配置html插件
    new HtmlWebpackPlugins({ // 创建一个对象
        filename:'index.html', // 设置打包完成后的文件名
        template:'template.html' // 需要打包的html的文件路径
    })
] 
// 热更新时，打包好的html文件存在内存中，在文件的根目录中 ./ 但不可见，可运行
 // 打包好的html文件会自动引入打包的js文件和打包好的css文件，不需要手动引入
 // 执行打包命令后，该文件会出现在你配置的出口的文件路径中

1、安装 npm install -S html-withimg-loader
2、在webpack.config.js文件中添加loader
 module: {
    rules: [
		{
   			test：/\.(html|htm)$/i,
    		loader:'html-withimg-loader'
		}
]

1.npm i file-loader url-loader -D
	url-loader封装了file-loader
{
        test: /\.(gif|png|jpg)$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 5 * 1024,
            outputPath: "static",
            name: "[name]-[hash:4].[ext]"
          }
        }]
      },

第二部分：出现的问题和解决办法；
安装好以上插件及loader即可打包html中img标签上的图片，但在实际打包中出现如下代码：

出现的问题：
打包后的html代码：
     <div class="content">
      <img src={"default":"static/1-19bb.jpg"} title="图片" />
    </div>
    
    img路径上多出default的对象，实际只需要static/1-19bb.jpg的路径即可
    导致图片打包正常，但无法显示

2、解决打包后图片无法显示，路径上多出default对象的问题

解决办法：esModule: false // 该项默认为true，改为false即可
		esModule: true该配置项为图片打包后的默认路径，带default对象，
		默认为ture，在配置项里将此项改为false即可去掉多余的defalut
		对象，

      {
        test: /\.(gif|png|jpg)$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 5 * 1024,
            outputPath: "static",
            esModule: false, // 该项默认为true，改为false即可
            name: "[name]-[hash:4].[ext]" 
          }
        }]
      },
      
      解决后的打包代码如下：
      
      <div class="content">
          <img src="static/1-19bb.jpg" title="图片" />
      </div>
      
      default对象已去掉，打包后图片显示正常

						如有不对，欢迎评论区交流指导。
						欢迎关注公众号：前端学海