详解webpack之图片引入-增强的file-loader:url-loader

前言:

本文介绍了url-loader(增强的file-loader);

url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面;从而减少服务器请求。优化性能。

url-loader解决的问题:

如果图片较多,会发很多http请求,会降低页面性能。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

url-loader和file-loader是什么关系呢?

简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。

通过上面的介绍,我们可以看到,url-loader工作分两种情况:

1.文件大小小于limit参数,url-loader将会把文件转为DataURL;

2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

正文:

代码和项目目录用的还是上一篇《webpack之引入图片》。

url-loader可以看作是增强版的file-loader。

url-loader把图片编码成base64格式写进页面,从而减少服务器请求。

安装url-loader

npm i -D url-loader

配置webapck.config.js

执行 npm run build

在dist目录下面找到build成功的index.html页面。在浏览器的控制台中可以看到图片以base64的格式加载进页面。

现在我们做一些优化,如果图片大小小于50kb则以base64的格式加载,否则以图片地址方式加载。

补充:简单介绍下url-loader的配置

其实跟file-loader相比差不多,url-loader会按照配置把小于一定大小的图片以dataUrl的形式储存。

引用方式与上面相同:loader的配置如下:

{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8000&name=img/[name]-[hash:5].[ext]',//小于8kb的图片以dataurl的方式存储

}

补充一个:如何打包html文件中的图片呢?

首先安装相应的loader:

$ npm install html-withimg-loader --save-dev1

在webpack.config.js中做相应的配置:

module: {
  loaders: [
    {
      test: /\.html$/,
      loader: 'html-withimg-loader'
    }
  ]
}

最后在入口的js文件中引入html

import '../index.html';

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Webpack loader 之 file-loader

    简介 安装 npm install --save-dev file-loader 用法 默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名. import img from './webpack-logo.png' webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', option

  • 详解webpack之图片引入-增强的file-loader:url-loader

    前言: 本文介绍了url-loader(增强的file-loader): url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面:从而减少服务器请求.优化性能. url-loader解决的问题: 如果图片较多,会发很多http请求,会降低页面性能.url-loader会将引入的图片编码,生成dataURl.相当于把图片数据翻译成一串字符.再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了.当然,如果图片较大,编码会消耗性能.因此url-loader提供了

  • 一文详解webpack中loader与plugin的区别

    目录 一.Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二.Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件 常见的Loader和Plugin loader: plugin: 一.Loader 1.loader的作用: webpack 只能直接处理 javascript 格式的代码.任何非 js 文件都必须被预先处理转换为 js 代码,才可以参与打包.loader(加载器)就是这样一个

  • 详解webpack 打包文件体积过大解决方案(code splitting)

    优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • 详解MySQL8.0​ 字典表增强

    MySQL中数据字典是数据库重要的组成部分之一,INFORMATION_SCHEMA首次引入于MySQL 5.0,作为一种从正在运行的MySQL服务器检索元数据的标准兼容方式.用于存储数据元数据.统计信息.以及有关MySQL server的访问信息(例如:数据库名或表名,字段的数据类型和访问权限等). 8.0之前: 1.元数据来自文件 2.采用MEMORY表引擎 3.frm文件 存放表结构信息 4.opt文件,记录了每个库的一些基本信息,包括库的字符集等信息 5..TRN,.TRG文件用于存放触

  • 详解Python import方法引入模块的实例

    详解Python import方法引入模块的实例 在Python用import或者from-import或者from-import-as-来导入相应的模块,作用和使用方法与C语言的include头文件类似.其实就是引入某些成熟的函数库和成熟的方法,避免重复造轮子,提高开发速度. python的import方法可以引入系统的模块,也可以引入我们自己写好的共用模块,这点和PHP非常相似,但是它们的具体细节还不是很一样.因为php是在引入的时候指明引入文件的具体路径,而python中不能够写文件路径进

  • 详解Android中图片的三级缓存及实例

    详解Android中图片的三级缓存及实例 为什么要使用三级缓存 如今的 Android App 经常会需要网络交互,通过网络获取图片是再正常不过的事了 假如每次启动的时候都从网络拉取图片的话,势必会消耗很多流量.在当前的状况下,对于非wifi用户来说,流量还是很贵的,一个很耗流量的应用,其用户数量级肯定要受到影响 特别是,当我们想要重复浏览一些图片时,如果每一次浏览都需要通过网络获取,流量的浪费可想而知 所以提出三级缓存策略,通过网络.本地.内存三级缓存图片,来减少不必要的网络交互,避免浪费流量

  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

  • 详解webpack babel的配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先

  • 详解webpack 入门与解析

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但

随机推荐