09-webpack打包图片资源

最新推荐文章于 2025-06-04 15:33:59 发布

原创最新推荐文章于 2025-06-04 15:33:59 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

学习专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用Webpack处理项目中的图片资源，包括安装必要加载器、配置Webpack规则来处理CSS及HTML中的图片引用，并确保正确输出及引用路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载
下载url-loader和file-loader两个包，依赖关系
npm i url-loader file-loader -D
使用插件

module: {                  //css打包规则
        rules: [{
            test: /\.css$/,        //把项目中所有以.css结尾的文件打包,插入到html里
            use: [MiniCssExtractPlugin.loader,"css-loader","postcss-loader"]  //css兼容loader，单独的css文件
        },{
            test: /\.(png|jpg|jpeg|gif)$/,               //处理图片资源
            //如果只有一个loader不用数组，就不需要use，直接使用loader
            loader: "url-loader",
            options: {
                publicPath: '../img/',                 //公共路径，拼接css里的图片路径
                outputPath: 'img/'             //输出路径

            }
        }]
    },

css中引入图片

body {
    margin: 0;
    padding: 0;
}

h1 {
    color: blue;
}
.box {
    width: 100px;
    height: 150px;
    background-color: bisque;
    color: blueviolet;
}
.box2 {
    width: 200px;
    height: 200px;
    background: url("../img/eduplayer.jpg") no-repeat;
    background-size: 100% 100%;
}
.box3 {
    width: 200px;
    height: 200px;
    background: url("../img/eduwork.gif") no-repeat;
    background-size: 100% 100%;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script defer src="vendor.js"></script><script defer src="index.js"></script><link href="./css/demo.css" rel="stylesheet"></head>
<body>
<h1>商城首页~~~~~~</h1>
<div class="box">
    this is a box1
</div>
<div class="box2">
    this is a box2
</div>
<div class="box3">
    this is a box3
</div>
</body>
</html>

执行webpack，打包后的css样式，图片路径会生成base64格式

若不想是base64的格式，想要独立的图片文件，可添加参数

module: {                  //css打包规则
        rules: [{
            test: /\.css$/,        //把项目中所有以.css结尾的文件打包,插入到html里
            use: [MiniCssExtractPlugin.loader,"css-loader","postcss-loader"]  //css兼容loader，单独的css文件
        },{
            test: /\.(png|jpg|jpeg|gif)$/,               //处理图片资源
            //如果只有一个loader不用数组，就不需要use，直接使用loader
            loader: "url-loader",
            options: {
                publicPath: '../img/',           //公共路径，拼接css里的图片路径
                outputPath: 'img/',           //输出路径
                limit: 8 * 1024,                  //图片大小于8KB，就会被base64处理，减少请求数量
                name: '[name][hash:10].[ext]',   //给图片重命名，[hash:10]取图片hash的前10位，[ext]取文件原来的扩展名
            }
        }]
    },

执行后图片（一张图片大于8KB，一张小于8KB），设置限制大小后，只有一张图片生成独立的文件，另外一张图片为base64格式
在这里插入图片描述

以上是在css中引入图片，接下来如何在html中引入图片，需要另外添加规则，否则html里的图片路径没有任何边变化且没有自动打包到相应的路径
首先安装html-loader
npm i html-loader -D
编辑webpack.config.js

module: {                  //css打包规则
        rules: [{
            test: /\.css$/,        //把项目中所有以.css结尾的文件打包,插入到html里
            use: [MiniCssExtractPlugin.loader,"css-loader","postcss-loader"]  //css兼容loader，单独的css文件
        },{
            test: /\.(png|jpg|jpeg|gif)$/,               //处理图片资源
            //如果只有一个loader不用数组，就不需要use，直接使用loader
            loader: "url-loader",
            options: {
                publicPath: '../img/',           //打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。
                outputPath: 'img/',           //输出路径
                limit: 8 * 1024,                  //图片大小于8KB，就会被base64处理，减少请求数量
                name: '[name][hash:10].[ext]',   //给图片重命名，[hash:10]取图片hash的前10位，[ext]取文件原来的扩展名
            }
        }, {
            //html-loader处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
            test: /\.html$/,
            loader: "html-loader",

        }]
    }

index.html添加
<img src="img/lmonkey.png" alt="monkey">
执行webpack
执行后有个问题，html里的图片资源无法访问，路径不对，这个还要再找找问题
<img src="e5c9f4bc2237d8117c14.png" alt="monkey">