这是一款针对webpack的像素转vw单位的loader插件。

笔者公司中,h5 rem的开发方案目前已经渐渐开始转向vw方案,因此本工具应运而生。

目前所制作的h5,大部分设计稿分辨率都是750的宽度,所以设定的基础分辨率是750,如果遇到特殊情况,只需要简单修改一下配置即可。

安装:

npm i px2vw-view-loader

配置:
按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目

module: {
rules: [{
test: /\.css$/,
loader:'px2vw-view-loader',
query:{
viewportWidth: 750,
viewportUnit: 'vw',
minPixelValue:1,
decimal:3
}
}]
}

参数:

参数名 默认值 备注
viewportWidth 750  设计稿宽度,单位像素
viewportUnit 'vw'  转换单位
minPixelValue 1 最小转换单位,例如minPixelValue:1,则1px及以下不进行转换
decimal 3 转换后保留的小数位数

webpack的像素转vw loader插件的更多相关文章

  1. webpack的像素转vw单位的loader插件

    安装: npm i px2vw-view-loader 配置: 按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目 module: { rules: [{ ...

  2. node作为前台的项目如何打包静态js和css并生成版本号,loader插件的使用

    一.使用场景: 1.node创建的前台项目需要输入地址展示页面 2.有设置缓存或者cdn的需要在静态文件更改时能使用新的而不是缓存的,需要版本号这里 3.可能需要压缩静态文件的 二.一些参考地址,需要 ...

  3. 使用jquery的lazy loader插件实现图片的延迟加载

    当网站上有大量图片要展示的话,如果一次把所有的图片都加载出来的话,这势必会影响网站的加载速度,给用户带来比较差的体验.通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较 ...

  4. webpack学习(三)html-webpack-plugin插件

    一.html-webpack-plugin插件 简单创建 HTML 文件,用于服务器访问 例如:我们要为输出文件添加哈希值标记,避免老的不变的文件重新加载,避免新修改的文件受缓存影响. 在前后两次在终 ...

  5. webpack——entry,output,plugins,loader,chunk知识

    entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...

  6. webpack安装,常见问题和基本插件使用

    一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...

  7. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  8. webpack导入css及各项loader

    1. webpack导入css 1) 下载相关的加载器 npm install style-loader css-loader -D 2)将index.css引入到mian.js中 import '. ...

  9. webpack 引入jquery和第三方jquery插件

    1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...

随机推荐

  1. Oracle 11G R2 用exp无法导出空表解决方法

    四.  Oracle 10g以后增加了expdp和impdp工具,用此工具也可以导出空的表 oracleexpdp/impdp 用法详解 1)  创建逻辑目录,该命令不会在操作系统创建真正的目录,最好 ...

  2. vue项目中遇到的打印,以及处理重新排版后不显示echarts图片问题。

    1. 项目中用到的打印 页面: css: 控制好宽度一般A4 我调试的是794px多了放不下,小了填不满.当时多页打印的时候,一定要控制好每一个页面内容显示的高度不要超过一个页面,当然根据自己项目来. ...

  3. Kylin基础教程(一)

    一.Kylin介绍 1.1 现状 Hadoop于2006年初步实现,改变了企业级的大数据存储(基于HDFS)和批处理(主要基于MR)问题,10几年过去了,数据量随着互联网的发展井喷式增长,如何高速.低 ...

  4. SQL Server 汉字转拼音字母

    /* 汉字转拼音首字母 */ create function fun_getPY(@str nvarchar(4000)) returns nvarchar(4000) as begin declar ...

  5. ssh: connect to host port 22: Connection refused

    配置Linux的互信,互信完成后,连接需要+端口才可以​​已经将端口修改为7777,但依旧走的是默认的22端口​​修改方式:​[root@yoon ssh]# vi /etc/servicesssh ...

  6. DataTables入门

    转载 https://blog.csdn.net/gfd54gd5f46/article/details/65938189

  7. Element源码阅读(1)

    一.目的 阅读element源码旨在了解其代码的组织架构模式, 代码编写的方式, 以及组件化的一些思路, 对照自己, 从而进步. 二. 源码阅读所得 1.在element源码中的mixins目录之下, ...

  8. [CTSC1999][网络流24题]家园

    题目:洛谷P2754. 题目大意:有$n$个空间站,$m$个飞船,每个飞船有各自的停靠站点,并且从第一个停靠站点开始,不断循环.每个飞船有不同的容量(-1为月球,0为地球).每个飞船初始停在第一个停靠 ...

  9. [NOIP2012提高组]开车旅行

    题目:洛谷P1081.Vijos P1780.codevs1199. 题目大意:有n座海拔高度不相同的城市(编号1~n),两城市的距离就是两城市海拔之差.规定每次只能从编号小的城市走到编号大的城市. ...

  10. Linux系统串口接收数据编

    http://blog.csdn.net/bg2bkk/article/details/8668576 之前基于IBM deveplopworks社区的代码,做了串口初始化和发送的程序,今天在此基础上 ...