webpack window 处理图片和其他静态文件
安装url-loader
npm install url-loader --save-dev
配置config文件
{
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
}
注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。
下面举个栗子。
新建一个imgs文件夹,往里面添加一张崔叔的照片。在scss文件中添加如下的东西。
@import "./variables.scss";
h1 {
color: $red;
background: url('../imgs/avatar.jpg');
}
npm start, 然后查看图片的url,发现神奇。
webpack window 处理图片和其他静态文件的更多相关文章
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- create-react-app 打包后静态文件过大 webpack优化
在最近的项目里,页面和静态文件并不是很多的情况下,打包后发现产出的静态资源却很大. 1.关掉sourcemap 在config/webpack.config.js文件里,大概30几行的位置添加这样一句 ...
- 细说ASP.NET Core静态文件的缓存方式
一.前言 我们在优化Web服务的时候,对于静态的资源文件,通常都是通过客户端缓存.服务器缓存.CDN缓存,这三种方式来缓解客户端对于Web服务器的连接请求压力的. 本文指在这三个方面,在ASP.NET ...
- NET Core静态文件的缓存方式
NET Core静态文件的缓存方式 阅读目录 一.前言 二.StaticFileMiddleware 三.ASP.NET Core与CDN? 四.写在最后 回到目录 一.前言 我们在优化Web服务的时 ...
- Discuz!NT静态文件缓存(SQUID)
在目前最新版本的产品中,我们提供了缓存静态文件的解决方案,就是使用SQUID做静态前端,将论坛中的大部分静态文件布署或外链到一个新的HTTP链接上,其中可以外链的静态文件包括: 1.Disc ...
- [转]网站优化-IIS7下静态文件的优化
本文转自:http://www.cnblogs.com/Leung/archive/2009/10/26/1590256.html 在网站开发过程中,通常我们会对网站的静态文件做处事,像图片文件,CS ...
- 比较好的前端方法库及一些vue如何引入静态文件
https://select2.github.io/examples.html select2 自动搜索带select选择 ## 表单提交 https://github.com/marioizqu ...
- Web前端性能优化——如何有效提升静态文件的加载速度
WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页 ...
- 用Express、MySQL搭建项目(接口以及静态文件获取、文件上传等)
一.简介 本文将主要基于node.js使用express框架搭建一个后台环境,包括如何自定义项目目录.所用依赖以及中间件.路由以及模板引擎.接口数据获取以及文件上传等内容. 二.后台环境搭建 1.新建 ...
随机推荐
- Linux Kernel 2:用户空间的初始化
上篇我们知道,kernel初始化后将启动init进程,那么这个进程将干些什么呢?除此之外,kernel还需要做些什么事情呢?(想想文件系统.根存储设备是在什么时候初始化的呢?) 先从文件系统初始化说起 ...
- windows 通过Web.config添加mimetype映射
在Web.config里添加以下代码即可 <configuration> <system.webServer> <staticContent> <!-- re ...
- 未能加载文件或程序集“Microsoft.SqlServer.Sqm, Version=10.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91”或它的某一个依赖项。系统找不到指定的文件。 (SqlMgmt)
解决方法: Copy this file "Microsoft.SqlServer.Sqm.dll" in the forder "C:/Program Files/Mi ...
- MyCat - 使用篇
Mycat水平拆分之十种分片规则: http://www.cnblogs.com/756623607-zhang/p/6656022.html 数据库路由中间件MyCat - 使用篇(5) 配置MyC ...
- javascript中IE浏览器不支持NEW DATE()带参数的解决方法
代码如下: var date1=new Date(dateTimes[z][1]); 在火狐下 可以正常取得时间,在IE7下 却是 NaN.纠结老长时间,放弃了new date 然后再老外的论坛中找了 ...
- [置顶] 单例模式lua实现
--[[ 优点 一.实例控制 单例模式会阻止其他对象实例化其自己的单例对象的副本,从而确保所有对象都访问唯一实例. 二.灵活性 因为类控制了实例化过程,所以类可以灵活更改实例化过程. 缺点 一.开销 ...
- Summarizing NUMA Scheduling两篇文章,解释得不错
http://vxpertise.net/2012/06/summarizing-numa-scheduling/ Sitting on my sofa this morning watching S ...
- h5可伸缩布局方案
https://github.com/amfe/lib-flexible ib.flexible 移动端自适应方案,相关文章请参考此处 Update[2016年01月13日] 首先,由衷的感谢@完颜( ...
- JSP与Servlet之间的关系事例说明
Servlet Servlet 没有 main 方法,不能够独立的运行,它的运行需要容器的支持,Tomcat 是最常用的 JSP/Servlet 容器.Servlet 运行在 Servlet 容器中, ...
- 利用mvn进行多环境配置
代码里的resource信息有很多,代码里写死某一个环境的配置的话,有以下若干问题. 1. dev,不同的beta上,使用的resource信息不同. 2. 代码没有发布到对应的环境上,需要去机器上需 ...