webpack之解析图片，字体

最新推荐文章于 2022-08-04 22:03:45 发布

liuhua_2323

最新推荐文章于 2022-08-04 22:03:45 发布

阅读量337

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/liuhua_2323/article/details/103305116

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍如何使用file-loader和url-loader处理Webpack中的图片和字体资源，包括安装、配置及打包流程，同时提供了解决html内img标签引用图片的方法。

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

我先简单介绍下这两个loader:

file-loader 用于处理文件

url-loader也可以处理图片和字体，可以设置较小资源自动base64，减少http请求

下面我以file-loader为例介绍webpack解析图片字体：

1.安装：cnpm i file-loader -D

2.在src下引入图片，并新建index.js


import logo from './1574926505.jpg'
let imgNode=new Image();
imgNode.setAttribute('src',logo);

document.body.appendChild(imgNode);

3..webpack.config.js中配置

"use strict";

const path=require('path');

module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'production',
    module:{
        rules:[
            {
                test:/\.(png|jpg|svg|gif)$/,
                use:'file-loader'
            }
        ]
    }
}

4.npm run build打包

Tips:

字体和图片操作流程一样，这里就不多做介绍，只需修改一下匹配规则

webpack 目前的打包入口只能是以 js 为入口的，暂时还不支持以 html 为入口进行打包，也就是 webpack 默认是不会分析 html 文件里面的依赖(比如 src=xxx 或者外部 css 中的语法)。可以看下这个 issue 的讨论：（https://github.com/webpack/webpack/issues/536）

在html里用img的src引用图片。
解决办法：可以增加 html-loader 去处理 html，这样的话可以识别的了 img:src 这个属性。html-loader 提供了解析 html 里面的图片引入的能力