webpack 处理图片

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

首先,在项目中添加一些图片:
目录结构如下图:
webpack 处理图片_第1张图片

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

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

其次,修改 index.temp.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test webpacktitle>
head>
<body>

    
    <div style="background-image: url(./images/A.jpg);width: 690px;height: 863px">div>

    <br style="color: red">

    
    <div class="imgs">div>

    <h3>This is my first test.h3>

    
    <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"
            }
            ...
        ]
    }
    ...
}

启动 package.json 中的 server script 就可以在页面中显示了。

编译后的目录结构如下:
webpack 处理图片_第2张图片

以下是部分效果图:
webpack 处理图片_第3张图片

你可能感兴趣的:(webpack)