这是一款针对webpack的像素转vw单位的loader插件. 笔者公司中,h5 rem的开发方案目前已经渐渐开始转向vw方案,因此本工具应运而生. 目前所制作的h5,大部分设计稿分辨率都是750的宽度,所以设定的基础分辨率是750,如果遇到特殊情况,只需要简单修改一下配置即可. 安装: npm i px2vw-view-loader 配置:按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目 module: { rules: [{ test: /\.c…

一.使用场景: 1.node创建的前台项目需要输入地址展示页面 2.有设置缓存或者cdn的需要在静态文件更改时能使用新的而不是缓存的,需要版本号这里 3.可能需要压缩静态文件的 二.一些参考地址,需要安装的插件 1.loader ( https://github.com/JacksonTian/loader )(配合编译使用的) 2.loader-builder( https://github.com/JacksonTian/loader-builder )( 打包的) 3.完整的笔记地址,是x…

当网站上有大量图片要展示的话,如果一次把所有的图片都加载出来的话,这势必会影响网站的加载速度,给用户带来比较差的体验.通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端. 使用lazy loader插件很简单,只要在页面中引入lazy loader插件,然后为页面上的图片调用延迟加载方法就可以了.lazy loader插件的下载地址:http:…

安装: 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 } }] } 也支持聚合的写法 module: { rules…

一.前言 fis3是百度推出的一款前端工程构建工具,类似的还有webpack,gulp等工具:无论大家有没有使用过,从事前端行业应该都略知一二了,所以对于此类工具用干嘛的我这里就不做重复了. 其实对于这类构建工具,大部分人是不感兴趣,或者说有些畏惧的,配置多贼麻烦,无法像js一样调试很恐怖,给人感觉很难:特别是fis3这种相对比较冷门的构建工具,出现问题百度一圈相关答案真的很少... 我也曾抱怨公司为啥不用webpack,但我毕竟不是抉择者,已经决定了使用这个还不如沉下心去学习了解:本文会抽出我…

安装插件: npm install -g fis-parser-less npm install -g fis3-postpackager-loader 配置:fis-conf.js 使用fis-parser-less 插件进行解析,.less 文件后缀构建后被改成 .css 文件 fis.match('*.less', { parser: fis.plugin('less'), rExt: '.css' }) less的打包: //less转换为css fis.match('*.less',…

本文由作者郑海波授权网易云社区发布. 前言 我这里就不介绍requirejs了, 简而言之: requirejs是支持AMD规范的模块加载器, 事实上它也是AMD的最直接推动者. 现在可供挑选的开源模块解决方案很多,比如component.cjs+browserify.umd等等,但是无疑类似requirejs这类加载系统是现在最成熟和可靠的解决方案,所以regularjs第一步就是提供对requirejs的插件支持. requirejs的插件体系 requirejs的源码内部预留了hook,使…

概述 原来的cc.Loader被改造为一个单例cc.loader,采用了插件机制设计,让loader做更纯粹的事. 各种资源类型的loader可以在外部注册进来,而不是直接将所有的代码杂揉在cc.Loader中,更好的方便管理以及用户自定义loader的创建. cc.loader中包含了一些网络资源获取的基本api,例如加载js.加载image等. API描述 (注:以下描述中,全路径的意思为 "资源的根路径" + "资源路径", 例如设置图片资源根路径(cc.lo…

1.webpack-dev-server插件的基本使用 入门程序 const path = require('path'); // 导出一个Webpack的配置对象(通过node中的模块操作,向外暴露了一个配置对象) module.exports = { // 需要在这里手动指定入口 和 出口 entry : path.join(__dirname, './src/main.js'), // 入口:表示要使用webpack打包那一个文件 output : { // 输出文件的相关配置 path…

FIS 插件机制 author: @TiffanysBear 当我们使用 FIS 插件的时候,有没有想过自己也开发一个基于 FIS 的插件,参与 FIS 打包编译的整个流程:那么问题就来了: FIS 的编译过程运行原理是怎样的呢? FIS 编译打包的过程有哪些? 怎么参与FIS 的打包编译过程? 怎么实现一个基于FIS的插件? FIS 是怎么引入自定义插件的? 基于以下的问题,从原理再进行慢慢分析,了解 FIS 编译的基本流程和原理,以及如何自己自定义一个 FIS 插件. 编译过程运行原理 fi…

背景 在前段时间做了L10的某个超复杂超多坑的三端专题之后,组里的小伙伴们一致认为是时候想办法统一一下组里的开发模式了.因为用nie那一套jQuery/zepto(下文jQuery默认包括zepto)的话,十个人就有十种习惯,不管是代码组织也好,页面结构也好,逻辑处理也好…… 其实如果像一般的专题,开发周期短,生命周期短的,用传统的方式开发也还好,不需要后期维护,不需要多人协作.但是,如果项目稍微复杂一点,问题就来了,一碰到需要多人协作的项目,不同的人都有不同的组织代码的习惯,维护起来效率相当低…

最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心应手.参照了<高性能网站建设指南-前端工程师技能精髓>,本文主要主要概述前端的性能调优的方法. 第一条优化:减少http请求 一想到调优好多人都会想到减少http请求,但是可能好多人都会不知道具体操作,我一开始也不知道.项目刚好使用fis发现fis可以打包脚本和样式表.perfect!fis的打包…

前言 页游目前有两个客户端入口: 网页端 (unity webplayer) 游戏微端 (unity standalone) 关于微端的技术,可参考我之前的文章: dotNet开发游戏微端 游戏微端的多渠道思路和简易的自动化打包工具 总体思想 近日为提高页游的转化率,在做页游的检测机制,现把这个检测机制的思想及相关知识分享一下.大概就是浏览器-webplayer插件-操作系统-浏览器的一些信息检测和处理. 总体思想是,如果玩家不能通过网页启动游戏,根据操作系统区分,WIN7及以上优先安装微端,X…

2015年9月15日,APICloud举办了一周年开源分享会,发布开源插件支持Sublime用户开发跨平台App,APICloud 开源技术负责人周兴海分享了Sublime关于插件方面相关的内容. Sublime是一款关注度很高的的开发工具,有以下几个特点: 主流前端开发编辑器 体积较小,运行速度快 文本功能强大 支持编译功能且可在控制台看到输出 内嵌python解释器支持插件开发以达到可扩展目的 Package Control:ST支持的大量插件可通过其进行管理 接着,周兴海对APICloud…

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle.需要先理解四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) 入口(entry) 入口指 webpack 构建其内部依赖图开始的模块.进入入口后,webpack 会…

一.前提因为webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm.在这里我使用的版本是:node:v5.8.0 ,npm:3.7.3,若是版本问题,请更新到最新版.二.全局安装Webpack常规的安装是通过npm,如果 你对npm不是特别的熟悉请阅读:npm快速入门.Webpack的有些命令需要电脑安装才能使用,所以需要通过npm命名进行Webpack的全局安装: $ npm install webpack -g 安装之后执行 webpack …

目录 一.版本 二.webpack 的主体概念 2-1.入口 2-1-1.单页面入口 2-1-2.多页面应用的入口 2-2.输出 2-3.loader 2-4.plugins 三.如何使用 3-1 关于 resolve 解析的相关的疑问 4-1 优化(optimization) 5-1 插件(plugins) 6-1 开发中 server (devServer) 四.总结 一.版本 当前 webpack 版本 : v4.18.0 webpack -v // 4.18.0 同之前的版本不一样的地方…

一.webpack中常用的文件loader & 插件 由于版本存在变动,以下安装和配置都有可能发生变化,请以官方文档为准. 1.html-webpack-plugin插件 html-webpack-plugin是在内存中生成html模板的插件plugin 首先安装插件npm install html-webpack-plugin -D,然后在配置文件webpack.config.js中进行插件配置: const HtmlWebpackPlugin = require('html-webpack-…

前言 大概16年的时候我们队react进行了简单的学习:从DOM操作看Vue&React的前端组件化,顺带补齐React的demo,当时我们只是站在框架角度在学习,随着近几年前端的变化,想写个hello world似乎变得复杂起来,我们今天便一起来看看现代化的前端,应该如何做一个页面,今天我们学习react首先说一下React的体系圈 无论Vue还是React整个体系圈十分的完备,就一个中级前端想要提高自己,完全就可以学习其中一个体系,便可以收获很多东西,从而突破自身 从工程化角度来说,前端脚手…

前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这块研究进展缓慢,但是一直做下去,肯定还是会有一些收获的 之前我们这个课题研究一直是做独立的研究,没有去看已有的解决方案,这个是为了保证一个自己独立的思维,无论独立的思维还是人格都是很重要的东西,然独学而无友则孤陋而寡闻,稍微有点自己的东西后,还是应该看看外面已有的东西了,今天的目标是mpvue,我们来看看其官…

webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是静态网页的开发,前端代码的逻辑和交互越来越复杂. 回想一下最初我们如何开发一个页面,切图.写样式.用JQuery写一写JS效果,页面开发完就能直接在浏览器里查看.我们手动编译(比如用koala编译less),手动压缩(比如用compress压缩css),手动对比代码(比如用compare对比代码).…

###1.webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) 1.xxx版本只能加载js文件,其余加载js/json文件:其他格式需使用对应的loader进行转换或加载 ###2.开启项目   * 初始化项目:       * 生成package.json文件       *        ```          {         "name…

vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project npm install npm run dev vue项目开发步骤 根据原型稿拆分组件-->路由组件(pages).复用组件(components) 根据路由组件定好路由router/index.js 看后端接口文档写好api/ajax.index请求好数据,有些时候后端没写好接口则需要自己mock数据…

vue-cli相当于脚手架 给你自动生成模板工程vue-router是 vue路由插件 支持你单页应用的vue-loader是webpack下loader插件 可以把.vue文件 输出成组件…

webpack有四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) 输出: 在哪里输出创建的bundles,以及如何命名这些文件, 默认./dist filename : 输出文件的文件名 path:         目标输出目录 path 的绝对路径. output: { library: "someLibName", libraryTarget: "umd", filename: "someLibName.j…

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 它是高度可配置的,但是,在开始前你需要先理解四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) 入口(entry) 入口起点(entry point)指示…

前言 大家好哟,这是第四篇面试官篇,估计还有个七八十篇面试文章(前端苦命). 这篇文章介绍了webpack核心概念以及如何使用. 开始吧! 概念 webpack的核心概念只要记住下面四个就够用了(除非大佬是webpack配置工程师). 入口 出口 loader 插件 入口 module.exports = { entry: './src', //单入口 // or entry: [ './src', //多入口 '/src2', ], // or entry: { main: './src',…

Node.js安装 1.下载对应你系统的Node.js版本: https://nodejs.org/en/download/ 命令提示符下输入命令 node -v 会显示当前node的版本 快速入门 1 控制台输出 如何在控制台输出,创建文本文件demo1.js,代码内容 var a=1; var b=2; console.log(a+b); 在命令提示符下输入命令 node demo1.js 2 使用函数 创建文本文件demo2.js var c=add(100,200); console.l…

最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心应手.参照了<高性能网站建设指南-前端工程师技能精髓>,本文主要主要概述前端的性能调优的方法. 第一条优化:减少http请求 一想到调优好多人都会想到减少http请求,但是可能好多人都会不知道具体操作,我一开始也不知道.项目刚好使用fis发现fis可以打包脚本和样式表.perfect!fis的打包…

webpack有四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) webpack-merge将环境.构建目标.运行时合并 入口: 入口起点是指webpack 应该使用哪个模块 来作为构建其内部依赖图的开始 webpack会找出有哪些模块和库是入口起点(直接.间接)依赖的 每个依赖项随机被处理 最后输出到称之为bundles的文件中 可以通过webpack配置中配置entry属性,来指定一个入口起点(或多个入口起点)默认值为 ./src 单个入口: c…