Webpack——使用webpack Image loader 加载图片

最新推荐文章于 2024-08-09 07:12:04 发布
最新推荐文章于 2024-08-09 07:12:04 发布
阅读量4.8k 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39279356/article/details/80816031
版权

1、新建main.js文件， 创建img标签后，把src的值用require引进来。然后插入标签。

1

2

3

4

5

6

7

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);

2、建立index.html文件，引入bundle.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!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>

3、建立webpack.config.js配置文件

1

2

3

4

5

6

7

8

9

10

11

module.exports = {

    entry: './main.js',

    output: {

        filename: 'bundle.js'

    },

    module: {

        loaders: [

            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },

        ]

    }

};

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

4、打开命令行，用cnpm 安装url-loader包。

1

$ cnpm install url-loader --save-dev

5、用webpack命令进行打包

1

$ webpack

七汐爱椰枣
关注
专栏目录
webpack 图片处理 loader
方寸间的博客
10-05 1533
webpack——loader和plugin
weixin_44422620的博客
09-17 348
webpack——loader和plugin。
webpack 学习（4）--- 使用webpack Image loader 加载图片
半夏半暖半倾城的博客
08-18 1336
直接用一个例子说明 建立index.html文件，引入bundle.js &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;title&gt;&lt;/title&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta name=&
image-webpack-loader 使用教程
最新发布
gitblog_00040的博客
08-09 632
image-webpack-loader 使用教程 image-webpack-loaderImage loader module for webpack项目地址:https://gitcode.com/gh_mirrors/im/image-webpack-loader 项目介绍 image-webpack-loader 是一个基于 Webpack 的图片压缩加载器，它利用 imagemin ...
webpack loader 使用之 image-webpack-loader
Zn 的个人技术分享
11-09 6275
webpack 使用 image-webpack-loader, 我们可以对打包图片文件进行压缩。原文描述 ：Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin内部使用 imagemin 库处理并压缩图片。
image-webpack-loader 图片压缩
A1314bc的博客
01-12 705
image-webpack-loader虽然说官网已经不维护了 但是压缩功力还是很强的，一张图见证一下。老实人不欺负老实人 这真的就一下子秒开，以下代码复制之后直接使用。
webpack5图片压缩-image-webpack-loader插件
weixin_42349568的博客
05-18 3765
一，常规webpack打包的配置 我们通常会设置大图片打包出来，小图片转成base64的形式进行webpack进行打包。 具体设置见这篇文章的第七节：https://blog.csdn.net/weixin_42349568/article/details/124370794 现在有个项目就是这样配置的，想要先将图片进行压缩，然后再执行这个打包策略。 二，安装image-webpack-loader 这个插件不能用npm库安装，而必须使用cnpm安装 npm install cnpm -g --regis
webpack-image-placeholder-loader：生成纯色图像作为占位符
02-17
webpack-image-placeholder-loader 该加载器从给定图像生成彩色或纯色图像，用作占位符。 该程序包在内部使用。 有关从图像派生的，请参见。 支持JPEG，PNG，WebP，TIFF，GIF和SVG图像。 例子 安装 使用npm安装：...
在vue中使用image-webpack-loader实例
01-21
提示：在这里url-loader 和 image-webpack-loader 不能一起使用，否则会导致图片出不来 接着找到 module: { rules: [ {}... ] } 在这里写入，一定要先写 ‘file-loader’ 才能使用 ‘image-webpack-loader’ 有...
vue打包通过image-webpack-loader插件对图片压缩优化操作
01-18
vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积 step1： npm install image-webpack-loader –save-dev step2： 在build/webpack.base....
image-minimizer-webpack-plugin：Webpack加载器和插件，用于使用imagemin压缩图像
02-06
插件和加载器以优化（压缩）使用的所有图像 。 不用担心图像的大小，现在它们总是经过优化/压缩的。 image-minimizer-webpack-plugin 该插件使用优化图像。 入门 首先，您需要安装image-minimizer-webpack-plugin ...
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
img图片在webpack中使用
weixin_33753845的博客
04-10 540
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 261
webpack书写简单处理图片的loader
【webpack】图片加载
richest_qi的博客
07-30 923
file-loader module.exports = { module:{ rules:[ { test:/\.(gif|png|svg)$/, use:['file-loader'] } ] } } #logo{ margin:30px auto 0; background-image:url(../../../asset.
webpack图片压缩image-webpack-loader
Young的博客
07-20 7163
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: 深入理解图像加载原理与最佳实践
Wang的专栏
06-29 1401
图形图像资源是当代 Web 应用的最常用、实惠的内容、装饰元素之一，但在 Webpack 出现之前对图像资源的处理复杂度特别高，需要借助一系列工具(甚至 Photoshop)完成压缩、雪碧图、hash、部署等操作。而在 Webpack 中，图像以及其它多媒体资源都被提升为一等公民 —— 能够像引用普通 JavaScript 模块一样通过语句导入资源模块，这种开发模式允许我们将图像相关的处理合入统一的心智模型中，提升开发效率。如何使用适当的 Loader 处理图像资源；
webpack loader 使用之 image-webpack-loader (图片压缩)
weixin_42508745的博客
06-13 2448
webpack 使用 image-webpack-loader, 我们可以对打包图片文件进行压缩。原文描述 ：Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin内部使用 imagemin 库处理并压缩图片。
webpack css加载和图片加载
connie_1990的博客
06-03 6101
css加载器在webpack中，所有的资源（js文件、css文件、模板文件，图片文件等等）都被看成是一个模块，因此多有的资源都是可以被加载的。加载这些资源我们要在module属性定义这些加载配置（指定加载器）。 在module属性中，通过定义loaders定义加载器，其属性值是一个数组，每一个成员代表一个配置。 通过test定义匹配的规则（正则表达式） 通过loader定义加载器，可以通过！级联多
vue打包：使用image-webpack-loader优化图片压缩
将其替换为使用`loader`数组，同时结合`url-loader`和`image-webpack-loader`，以实现压缩和加载优化： ```javascript { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ 'url-loader?limit=10000&name='+utils....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值