webpack 处理图片_webpack html background-image-CSDN博客

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/78536583

本文接续上一篇文章来写，请查看：
http://blog.csdn.net/hsl0530hsl/article/details/78490034

首先，在项目中添加一些图片：
目录结构如下图：
这里写图片描述

然后，在 package.json 的 devDependencies 中导入如下两个库并进行安装：

    "html-loader": "^0.5.1",
    "file-loader": "^1.1.5"

其次，修改 index.temp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test webpack</title>
</head>
<body>

    <!--使用 background-image 添加图片-->
    <div style="background-image: url(./images/A.jpg);width: 690px;height: 863px"></div>

    <br style="color: red">

    <!--使用 css 添加图片-->
    <div class="imgs"></div>

    <h3>This is my first test.</h3>

    <!--使用 img 添加图片-->
    <img src="./images/A.jpg" alt="">

</body>
</html>

再次，修改 requireAddDiv.js：

import val from "./variables";
import src from "../images/C.jpg";

require("../css/index.css");

const div = document.createElement("div");
div.innerHTML = val.values;
document.body.appendChild(div);

//使用 js 添加图片
let img = document.createElement("img");
img.src = src;
let imgDiv = document.createElement("div");
imgDiv.appendChild(img);
document.body.appendChild(imgDiv);

接着，修改 index.css

body {
    background-color: yellow;
    color: blue;
}
div.imgs {
    background-image: url(../images/B.jpg);
    width: 1333px;
    height: 1000px;
}

最后，在 webpack.config.js 添加如下配置：

module.exports = {
    ...
    module: {
        rules: [
            ...
            {//处理图片，会在 output 目录中生成图片文件，js 中需要使用 require("*.jpg")先行引入才可以，同样 html 中通过 background-image 设置的图片不可以，但 css 中通过 background-image 设置的图片可以
                test: /\.(jpg|png)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        outputPath: "images/",//这里的 images 貌似没什么作用，但不写不行，可以是任意的一个或多个字符
                        name: "[name].[hash:8].[ext]",//8表示截取 hash 的长度
                        useRelativePath: true//这个必须与 outputPath 结合使用才可以处理 css 中的引入的图片
                    }
                }
            },
            {//处理 html 中通过 img 引入的图片，background-image 设置的图片不可以
                test: /\.html$/,
                use: "html-loader"
            }
            ...
        ]
    }
    ...
}