webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题
+
解决方式
的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本

1、参数默认值

《HTML5移动Web开发实战》提供了应对这一挑战的解决方案。通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台。全书共分10章,从移动Web、设备端配置和优化,变互、响应式设计、设备访问,调试、性能测试、富媒体等角度出发,包含了60多个实用的示倒,详细阐释如何构建快速、响应式的HTML5移动网站,适用于iOS、Android、WindowsPhone和BlackBerry等众多主流移动应用平台。  

图片 1

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

const p = new Point();

 

图片 2

控制台输出:

  《HTML5移动Web开发实战》作者是HTML5 Boilerplate项目的成员,MobileBoilerplate(//h5bp.com/mobile)的主要开发人员。《HTML5移动Web开发实战》为那些致力于实现高性能、响应式、跨平台的HTML5移动网站的程序员量身打造,也适合对移动Web开发感兴趣的读者学习参考。

一. loader综述

loaderwebpack的核心概念之一,它的基本工作流是将一个文件以字符串的形式读入,对其进行语法分析及转换(或者直接在loader中引入现成的编译工具,例如sass-loader中就引入了node-sass将SCSS代码转换为CSS代码,再交由css-loader处理),然后交由下一环节进行处理,所有载入的模块最终都会经过moduleFactory处理,转成javascript可以识别和运行的代码,从而完成模块的集成。

loader支持链式调用,所以开发上需要严格遵循“单一职责”原则,即每个loader只负责自己需要负责的事情:将输入信息进行处理,并输出为下一个loader可识别的格式。

实际开发中,很少会出现需要自己写loader来实现复杂需求的场景,如果某个扩展名的文件无法快速集成到自动化构建工具里,估计很快就会被抛弃了,大家都那么忙是吧。但是了解loader的基本原理和编译器的基本原理却是非常有必要的。

图片 3

 图片 4

二. 如何写一个loader

如果需要编写一个功能完整的loader,建议先到webpack的官方网站浏览一下loader有哪些API,地址:webpack官网-loader
API,其中对于编写同步loader异步loader如何跳过loader如何获取options配置项等等都做了非常详细的解释,本篇中不再赘述。

假设现在要实现一个dash-loader,它的功能是加载并处理名称为*.tpl.html的文件,将其变为一个CommonJs模块。也就是说要完成一个如下的基本转换:

转换前的文本:

<div>
    <h3>这里是标题</h3>
    <p>这里是内容</p>    
</div>

转换后的文本:

var str = '<div><h3>这里是标题</h3><p>这里是内容</p></div>';
module.exports = str;

那么webpack.config.js中需要增加如下的配置:

...
module:{
    rules:[{
        test: /\.tpl\.html$/,
        use:[{
            loader:'dash-loader'
        }]
    }]
}

在项目的node_modules依赖文件夹中新建dash-loader文件夹,并在其中新建一个index.js文件,内容的基本格式为:

//index.js
module.exports = function(source){
    var tpl="";
    source.split(/\r?\n/).forEach(function(line){
        line=line.trim();
        if(!line.length){
            return;
        }
        //对line进行处理...
        tpl+=line;
    });
    return "var tpl=\'" + tpl + "\'\nmodule.exports = tpl"; 
}

最终由dash-loader返回的数据就好像是从某个CommonJs模块中读入的一样了。

 

教程地址:HTML5移动Web开发实战 PDF扫描版​

三. loader的编译器本质

了解了loader的基本结构,那么loader里到底应该写点什么才能完成代码转换呢?这就涉及到了一个新的概念——编译器(Compiler)。一个基本的编译器,需要经过tokenize,parse,transform,stringify几个核心步骤,它的应用是非常广的,SPA中的virtual-DOM的解析,babel中的ES6语法解析等等,babel的官网曾经推荐过一个非常棒的开源项目(10k+Star),详细讲述了如何一步一步实现一个编译器的,建议感兴趣的同学可以自行学习:

【The-Super-Tiny-Compiler】——https://github.com/jamiebuilds/the-super-tiny-compiler

笔者最近在阅读《你不知道的javascript》一书,发现第一节就在讲述基本的编译原理,是的,你每天都在用的javascript的编译过程,和上面提及的都是一样的,你说要不要学?

2、rest参数

 

【参考】

《如何编写一个loader》

rest
参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

 

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3);//输出10

HTML5移动Web开发实战 目录:

3、严格模式

第1章 HTML5与移动网站 

ES2016
做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。

1.1 简介 

4、箭头函数

1.2 确定网站的适用移动设备 

箭头函数的一个用处是简化回调函数。

1.2.1 用户最常用的平台和浏览器是什么 

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

1.2.2 有多少用户使用支持现代脚本的移动设备 

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

1.2.3 Google Analytics的替代品 

'use strict';
console.log(sum(1,2))
let sum = (a,b)=>{return a+b};

1.2.4 Google Analytics的精准度 

 箭头函数使用时需要注意:

1.2.5 对服务端读取速度的担忧 

函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

1.3 配置移动开发工具 

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

1.3.1 准备 

普通函数为:

1.3.2 实践 

function foo() {
                setTimeout(function() {
                    console.log('id:', this.id);
                }, 100);
            }

            var id = 21;

            foo.call({
                id: 42
            });
            //输出id:21

1.3.3 回顾 

箭头函数根本没有自己的this,导致内部的this就是外层代码块的this

1.3.4 延伸 

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

1.4 BlackBerry仿真器 

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

1.4.1 准备 

 

1.4.2 实践 

1.5 配置移动开发环境 

1.5.1 准备 

1.5.2 实践 

1.5.3 回顾 

1.5.4 延伸 

1.6 在移动网站中使用HTML5 

1.6.1 准备 

1.6.2 实践 

1.6.3 回顾 

1.6.4 延伸 

1.7 跨浏览器HTML5 

1.7.1 准备 

1.7.2 实践 

1.7.3 回顾 

1.7.4 延伸 

1.8 移动设计 

1.8.1 准备 

1.8.2 实践 

1.8.3 回顾 

1.8.4 延伸 

1.9 定义一个内容策略 

1.9.1 准备 

1.9.2 实践 

1.9.3 回顾 

1.9.4 延伸 

第2章 移动端的配置和优化 

2.1 简介 

2.2 通过界面图标启动Web应用 

2.2.1 准备 

2.2.2 实践 

2.2.3 回顾 

2.2.4 延伸 

2.2.5 参考 

2.3 避免文本字体大小重置 

2.3.1 准备 

2.3.2 实践 

2.3.3 回顾 

2.3.4 延伸 

2.4 优化浏览器视口宽度设置 

2.4.1 准备 

2.4.2 实践 

2.4.3 回顾 

2.4.4 延伸 

2.5 修复移动版Safari的re-flow scale问题 

2.5.1 准备 

2.5.2 实践 

2.5.3 回顾 

2.5.4 延伸 

2.6 在浏览器中启动手机原生应用 

2.6.1 准备 

2.6.2 实践 

2.6.3 回顾 

2.6.4 延伸 

2.7 iPhone下全屏模式启动 

2.7.1 准备 

2.7.2 实践 

2.7.3 回顾 

2.7.4 延伸 

2.8 防止iOS在聚焦时自动缩放 

2.8.1 准备 

2.8.2 实践 

2.8.3 回顾 

2.8.4 延伸 

2.9 禁用或限制部分WebKit特性 

2.9.1 准备 

2.9.2 实践 

2.9.3 回顾 

2.9.4 延伸 

第3章 移动设备的交互方式 

3.1 简介 

3.2 利用触控来移动页面元素 

3.2.1 准备 

3.2.2 实践 

3.2.3 回顾 

3.2.4 延伸 

3.2.5 参考 

3.3 检测和处理横竖屏切换事件 

3.3.1 准备 

3.3.2 实践 

3.3.3 回顾 

3.3.4 延伸 

3.3.5 参考 

3.4 利用手势旋转页面元素 

3.4.1 准备 

3.4.2 实践 

3.4.3 回顾 

3.4.4 延伸 

3.4.5 参考 

3.5 利用滑动创建图库 

3.5.1 准备 

3.5.2 实践 

3.5.3 回顾 

3.5.4 延伸 

3.5.5 参考 

3.6 利用手势操作图片缩放 

3.6.1 准备 

发表评论

电子邮件地址不会被公开。 必填项已用*标注