这是一款针对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. UIimageView和UIimage的小区别

    UIimageView 用来显示一张图片或者显示一组动画图片 UIimage        不是一个控件,只是一个普通的类,用来生成一张图片,只单纯的生成一张图片,图片只会被加载到内存,如果想要让用户 ...

  2. 基于Redis实现分布式应用限流--转

    原文地址:https://my.oschina.net/giegie/blog/1525931 摘要: 限流的目的是通过对并发访问/请求进行限速或者一个时间窗口内的的请求进行限速来保护系统,一旦达到限 ...

  3. composer的一些操作

    版本更新 命令行下:composer self-update 设置中国镜像 composer config -g repo.packagist composer https://packagist.p ...

  4. 一个javascript面试题解析

    ; function fn(){ console.log(this.length); } var obj = { length: , method: function (fn) { fn(); // ...

  5. 使用最新vue_cli搭建的模版

    使用最新vue_cli搭建的模版,包含了常用的插件,router和axiox与测试插件.项目的结构如下: 使用之前请打开 REAMME.md 看看. 已经搭建好的框架的下载地址:https://sha ...

  6. HDU 1052 Tian Ji -- The Horse Racing【贪心在动态规划中的运用】

    算法分析: 这个问题很显然可以转化成一个二分图最佳匹配的问题.把田忌的马放左边,把齐王的马放右边.田忌的马A和齐王的B之间,如果田忌的马胜,则连一条权为200的边:如果平局,则连一条权为0的边:如果输 ...

  7. 一个完整的Flexbox指南(转载)

    本文由大漠根据Chris Coyier的<A Complete Guide to Flexbox>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此 ...

  8. 51nod 1113 矩阵快速幂( 矩阵快速幂经典模板 )

    1113 矩阵快速幂 链接:传送门 思路:经典矩阵快速幂,模板题,经典矩阵快速幂模板. /******************************************************* ...

  9. HDU 1005 Number Sequence(找规律)

    链接:传送门 题意:略 思路:f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7 -> f(n) = (A * f(n-1)%7 + B * f(n-1)%7) ...

  10. [国家集训队2009]小Z的袜子

    题目:洛谷P1494.BZOJ2038. 题目大意:给你一列袜子的颜色,每次要你求从区间$[L,R]$内随机选两个袜子颜色相同的概率.解题思路:首先,对于某个特定区间$[L,R]$,它的概率是$\fr ...