webpack 处理图片

╰半橙微兮° 2022-06-05 02:13 208阅读 0赞

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

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

然后，在 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>
    
        
        <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 就可以在页面中显示了。

编译后的目录结构如下：  
![这里写图片描述][SouthEast 1]

以下是部分效果图：  
![这里写图片描述][SouthEast 2]

[http_blog.csdn.net_hsl0530hsl_article_details_78490034]: http://blog.csdn.net/hsl0530hsl/article/details/78490034
[SouthEast]: /images/20220605/a80685f544cf4a0f8dee71e2a91e58de.png
[SouthEast 1]: /images/20220605/9c929d492c95439787925c8fac8cb2d0.png
[SouthEast 2]: /images/20220605/aa2bc060a1894384aca5ec0f852cc228.png