从零到一搭建webpack 仅供学习参考 part4

现在就处理一下其他资源，例如图片
需要下载的包有

cnpm i -D url-loader file-loader html-loader

然后在module use中继续编写

 {
     
                        //处理图片资源
                        test:/\.(jpg|png|jpeg|gif|svg)$/,
                        loader:'url-loader',
                        options:{
     
                            name:'[hash:10].[ext]',
                            esModule: false,
                      
                        }
                    },
                    {
     
                        //处理html图片资源
                        test:/\.html$/,
                        //处理html文件的img图片
                        loader: 'html-loader',
                        options:{
     
                            esModule: false,
                           
                        }
                    },
                    {
     
                        //处理其它资源
                        exclude: /\.(html|css|less|js|jpg|png|gif)$/,
                        loader: 'file-loader',
                        options: {
     
                            name: '[hash:10].[ext]',
                      
                            
                        }
                    }

  <div class="img-box">div>
    <img src="../images/222.jpg" alt="" style="width: 100px;">

css

.img-box{
     
    width: 100px;
    height: 100px;
    background-image: url('../images/icon_help.png');
    background-repeat: no-repeat;
    background-size: cover;
}

打包后效果