webpack 学习（4）--- 使用webpack Image loader 加载图片

最新推荐文章于 2024-04-26 00:11:22 发布
最新推荐文章于 2024-04-26 00:11:22 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 前端工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37580235/article/details/81812605
版权

直接用一个例子说明

  • 建立index.html文件，引入bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>
  • 新建main.js文件， 创建img标签后，把src的值用require引进来。然后插入标签。
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);

var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);
  •  建立webpack.config.js配置文件
module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
        ]
    }
};

这里需要说明的是limit ，它的左右是如果图片的大小，小于8192bytes就以Data URL的形式引入图片，大于就用图片地址引用。

  • 打开命令行，用cnpm 安装url-loader包。
cnpm install url-loader --save-dev
  • 使用webpack命令进行打包，生成'bundle.js'文件。

 

  • 安装live-server，只要用npm install就可以安装了
npm install live-server -g
  • 启动live-server预览
live-server
  • 效果图

显示不了图片，还在排查中。。。

 

一只前端小菜鸟~
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
image-webpack-loader:用于webpack的图像加载器模块
04-27
image-webpack-loader 用于webpack的图像加载器模块 使用PNG，JPEG，GIF，SVG和WEBP图像 输出的问题应在imagemin上报告。 安装 $ npm install image-webpack-loader --save-dev 安装在容器中 node:12-buster 无需其他准备工作。 所有依赖项将自动编译。 由于图像较大（〜1 GB），因此不建议使用。 node:12-buster-slim 准备脚本： apt-get update apt-get install -y --no-install-recommends autoconf automake g++ libpng-dev make 推荐的容器图片。 node:12-alpine 准备脚本： apk add --no-cache autoconf automake fil
webpack-image-resize-loader：用于调整导入图像大小的Webpack加载器
02-26
webpack-image-resize-loader 该加载程序将给定图像的大小调整为所需的大小。 支持JPEG，PNG，WebP和TIFF图像。例子安装使用npm安装： npm install --save-dev webpack-image-resize-loader 用纱安装： yarn add --...
Webpack——使用webpack Image loader 加载图片
七汐 的胡言乱语
06-26 4782
1、新建main.js文件， 创建img标签后，把src的值用require引进来。然后插入标签。 1 2 3 4 5 6 7 var img1 = document.createElement("img"); img1.src = require("./small.png"); document.bo...
(掌握)webpack对图片资源的基本处理
最新发布
小余的前端博客
04-26 458
好处举例：这样自己制定规则就可以防止，打包后的图片文件名字跟原来的文件名字已经牛头不对马嘴，完全对不上了。哈希值最好保存下来，哈希值是唯一的，防止图片不小心重复，[hash:6]就是只使用前6位哈希值(基本上也够用了)[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）[ext]： 处理文件的扩展名(后缀名，比如.svg，.js，.html之类的)之前通过使用 url-loader，并且配置资源体积限制实现。[name]：处理文件的名称(原来图片的名字)
webpack5图片压缩-image-webpack-loader插件
weixin_42349568的博客
05-18 3649
一，常规webpack打包的配置 我们通常会设置大图片打包出来，小图片转成base64的形式进行webpack进行打包。 具体设置见这篇文章的第七节：https://blog.csdn.net/weixin_42349568/article/details/124370794 现在有个项目就是这样配置的，想要先将图片进行压缩，然后再执行这个打包策略。 二，安装image-webpack-loader 这个插件不能用npm库安装，而必须使用cnpm安装 npm install cnpm -g --regis
webpack 中进行图片处理 file-loader img-loader url-loader
hjh15827475896的博客
01-10 6709
当webpack 处理图片的时候会使用如下 loader file-loader url-loader img-loader file-loader :对文件进行处理 （如：图片文件等） url-loader : url-loader中内置了 file-loader 所以当使用 url-loader的时候，可以不使用 file-loader img-loader: 作用是对图片进行压缩 ...
webpack图片压缩image-webpack-loader
Young的博客
07-20 7135
image-webpack-loader，img-loader 原文连接https://blog.csdn.net/lsvtogergo/article/details/81348934, 记录一下 { test: /\.(png|gif|jpe?g|svg)$/i, exclude:[path.resolve(process.cwd(), 'src/assets/css')], use: [ { loader: 'url-loader',
webpack-image-placeholder-loader：生成纯色图像作为占位符
02-17
webpack-image-placeholder-loader 该加载器从给定图像生成彩色或纯色图像，用作占位符。 该程序包在内部使用。 有关从图像派生的，请参见。 支持JPEG，PNG，WebP，TIFF，GIF和SVG图像。 例子 安装 使用npm安装：...
webpack-image-rotate-loader：Webpack加载器以旋转导入的图像
02-23
例子安装使用npm安装： npm install --save-dev webpack-image-rotate-loader 用纱安装： yarn add --dev webpack-image-rotate-loader用法该加载器输出原始的旋转图像文件。 "file-loader"或其他能够处理图像文件的...
image-minimizer-webpack-plugin：Webpack加载器和插件，用于使用imagemin压缩图像
02-06
插件和加载器以优化（压缩）使用的所有图像 。 不用担心图像的大小，现在它们总是经过优化/压缩的。 image-minimizer-webpack-plugin 该插件使用优化图像。 入门 首先，您需要安装image-minimizer-webpack-plugin ...
webpack loader 使用之 image-webpack-loader
Zn 的个人技术分享
11-09 6071
webpack 使用 image-webpack-loader, 我们可以对打包图片文件进行压缩。原文描述 ：Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin内部使用 imagemin 库处理并压缩图片。
img图片在webpack中使用
weixin_33753845的博客
04-10 530
HTML中使用<img>标签 ![](../../image/alarmLevel/cleared_round_5ecc49.png) 复制代码JS中使用require加载图片模块 const imgUrl = require('../../image/theme/light/nav/alarm.svg'); 复制代码注意：路径一定要是相对路径 image-webpack-load...
webpack-手写简单处理图片的loader
瓜皮伦的博客
04-19 243
webpack书写简单处理图片的loader
webpack中有哪些常见的loader?
weixin_47450807的博客
04-09 3967
1、file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件。 2、url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去。 3、source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试。 4、image-loader：载并且压缩图⽚⽂件。 5、babel-loader：将ES6转化为ES5。 6、css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性
webpack4+babel7入门到精通(四、图片的加载)
weixin_34072159的博客
04-24 124
一、使用file-loader加载图片 1、安装包 npm install file-loader -D 复制代码 2、在js中使用 let src = require('./images/default.jpeg'); let img = new Image(); img.src = src; document.body.appendChild(img); 复制代码 3、配置规则 { ...
webpack中常用loader及plugins（插件）
Cao_Mary的博客
03-02 2876
本文主要简单讲解常用loader及plugins的作用，方便快速查找。具体使用方法见官网或github 一、loader同plugins是什么 loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。 插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 l...
webpack问题
qishensaigao的博客
07-17 180
1.在HTML中加入图片&lt;img src="..." alt=""&gt;，补充loader html-withimg-loader 安装：cnpm install html-withimg-loader -S 配置webpack-config.js： {test:/\.html$/,use:'html-withimg-loader'} 2.字体图标&lt;i&gt;，boots...
【webpack】图片加载
richest_qi的博客
07-30 915
file-loader module.exports = { module:{ rules:[ { test:/\.(gif|png|svg)$/, use:['file-loader'] } ] } } #logo{ margin:30px auto 0; background-image:url(../../../asset.
webpack loader 使用之 image-webpack-loader (图片压缩)
weixin_42508745的博客
06-13 2027
webpack 使用 image-webpack-loader, 我们可以对打包图片文件进行压缩。原文描述 ：Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin内部使用 imagemin 库处理并压缩图片。
WM_03_加载和处理其他资源1
08-04
本篇文章将主要聚焦于"WM_03_加载和处理其他资源1"的主题，重点讲解如何在Webpack环境下使用file-loader处理图片资源。 首先，文章提到在项目中使用图片时，通常有两种常见方法：一是通过HTML的元素设置src属性，二...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只前端小菜鸟~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值