html中的图片如何打包？html图片打包的方法

  "scripts": {    
  "server": "webpack-dev-server --open",    
  "build":"webpack"
  },

module:{        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:5000,
                       outputPath:'images/',                   }
               }]
            }
          ]
    },

<p><img  src="./images/10.jpg" alt="html中的图片如何打包？html图片打包的方法" ></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/js/6584">
                            <img src="https://img.php.cn/upload/jscode/000/287/557/61d7944bb8cdd401.png" alt="5种风格css鼠标悬停图片显示文字信息">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/js/6584">5种风格css鼠标悬停图片显示文字信息</a>
                            <p>这是一组鼠标悬停特效，含5种不同风格的css鼠标悬停图片显示文字信息，每种风格包含2-3个款式，款款经典美观，适合任何团队、产品、个人作品等的展示，是非常不错的悬停展示方法。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="5种风格css鼠标悬停图片显示文字信息">
                                <span>99</span>
                            </div>
                        </div>
                        <a href="/xiazai/js/6584" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="5种风格css鼠标悬停图片显示文字信息">
                        </a>
                    </div>
                

 npm install html-withimg-loader –save

{    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}