webpack 中 对html 中的图片 img进行处理

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hjh15827475896/article/details/86301592

webpack 对css中的 url(./path..) 处理的时候使用的是 file-loader url-loader ,这是处理css文件中引用的图片，那么，在html中引用了图片用什么来进行处理呢

这里来说一下 html-loader

html-loader 就是用来处理 html中的图片的

可以对图片进行压缩等优化的操作

命令行安装

npm install html-loader --save-dev

在 template 的html中 加入 <img src="imagesrcPath" width=100px height=100px />

之后就可以在 webpack.config.js中进行配置了

module.export{
    entry:{
        app:"./src/app.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:[name].bundle.[hash:5].js
    },
    module:{
        rules:[

            ...

            {
                test:/\.html$/,
                use:[
                    {
                        loader:"html-loader",
                        options:{
                            attrs:["img:src"]  //此处的参数值  img是指html中的 <img/> 标签， src是指 img的src属性   表示 html-loader 作用于 img标签中的 src的属性
                        }
                    }
                ]
            }

            ...

        ]
    }

}