webpack中img进行处理

最新推荐文章于 2023-01-12 11:34:58 发布

Yad1219

最新推荐文章于 2023-01-12 11:34:58 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/yad_ya/article/details/115547215

版权

本文介绍了在webpack中处理img的方法，包括在css或less中引入的处理方式，以及在html中引入时如何避免与html-loader和HtmlWebpackPlugin冲突。通过使用html-withimg-loader，解决了在webpack5中打包html文件中img的问题。

摘要由CSDN通过智能技术生成

在webpage中会需要对img进行处理，比如说在css或者less中引入

html {
   
	padding: 0;
	margin: 0;
	background-color: pink;
}
#d1 {
   
    width: 300px;
    height: 300px;
	background-image: url(./img/1.jpg); 
}

此时我们只需要在webpack.config.js中进行如下操作即可

const {
    resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
   
    entry: "./src/index.js",
    output: {
   
        path: resolve(__dirname, "build"),
        filename: "js/build.js",
    },
    module