blog
blog copied to clipboard
renaesop
个人博客
本文主要说的是webpack编译中的make阶段，或者说webpack生成modules的整个流程。 > webpack的make过程还是比较复杂的，主要流程如下 ##  ## ## 1.核心 我认为make阶段的核心是依赖，实际上，make阶段的一切模块都由依赖构建出来。 首先是entry。我们在webpack的配置文件中可以指定entry，entry中指定的文件可以是单个、也可以是多个（字符串），举个entry给多个文件的例子(伪代码): ``` js 指定配置:: { entry: { main: ['./src/a', './src/b'], } } webpack:: const entryMainModule = { dependencies: { './src/a': Dep('./src/a'),...
> webpack里面的对象，只要是单例（或者实例数目只跟option挂钩），都可以定义plugin。 ## compiler 一般而言，webpack的配置文件是一个对象。但是，webpack的配置文件是可以给出数组的，并且可以嵌套。当给出数组的时候，就定义了多个构建任务了。每个webpack的构建任务对应一个compiler实例，互相之间独立，其执行方式是`async.map`。 自身将处理如下流程: - 结合用户和默认配置初始化option - 先加载option中定义的插件，再加载内建插件 - emit过程，负责输出文件 ## compilation webpack的编译任务的真正执行者。 自身会处理如下流程： - addEntry: 调用方法将entry转化为Dependency并转化为module - seal: 实现 `modules ==> chunks ==> assets`， 过程中会调度plugin执行优化，包括给出hash ## xxModule（不支持插件，但compilation上某些插件会在某些方法中被触发）...
> webpack的整个打包流程可以大致分为初始化打包器、解析和加载模块、生成和优化chunk、生成和输出资源文件这几个过程，然而webpack的官方文档对开发者很不友好。在此，笔者按照专有名词在整个打包流程中出现的顺序人肉总结了一下，希望能有所帮助： ### options - 顾名思义，webpack的配置信息，由用户定义的配置和webpack提供的默认配置合并之后生成。webpack的处理非常丰富。例如, defaulter中存储 `output.path`的方式为`this.set('output.path', '')`; 此外，options的每个配置项，实际上是有对应的写入规则来控制其行为的，包括`call、append、undefined`三种, 如果是`undefined`类型的规则，则是直接取字面量。 - options的标准形式是对象。但是options可以给出数组，这样相当于定义了多份打包任务，并且数组可以嵌套。 ### Tapable - webpack定义的一个可以定义插件，以及拥有丰富的插件执行方法的类，继承此类就可以拥有插件功能。 - webpack中定义的插件一般而言是生命周期钩子。 - [有人给了个Tapable中文文档](http://www.jianshu.com/p/c71393db6287) ### Compiler < Tapable - 可以认为是打包的任务单位。数量由options决定，如果有多个互相之间是独立的。compiler把一次打包任务划分成了几个部分: `make, seal, emit`。...
众所周知，webpack可以定义很多plugin; 大家也都知道webpack的plugin相关文档约等于0，能够讲清楚webpack的plugin的，笔者还没有见到。在这里，笔者就人肉去探查一番。 > 此文基于webpack1.13.2
> 会JS的同学都知道JS的作用域规则，也就是在函数和块的内部，可以访问外部的变量，比如全局变量。看起来这是一条语言铁律，但是实际上我们可以突破这一点，可以让函数无法访问到外部的变量甚至全局变量。 首先给出一段典型的代码: ``` js var a = 1; function factory() { console.log(a); } factory(); ``` 毫无疑问，这段代码会输出1，因为factory可以访问到外部的变量。那我们可不可以通过一定的手段让factory无法访问到a呢，答案是肯定的，只是需要一定的技巧。 首先，我们需要明确一点，JS函数中变量的引用是在函数定义点决定的，也就是说，只要在定义函数的地方访问不到外部的变量，函数也就访问不到了（废话︿(￣︶￣)︿）。不过这听起来还是没啥用。 其次，我们知道，在JS中有个被批的很惨的关键字——with，而且还被严格模式给驱逐出境了。with被批的原因，一在于他可以改变作用域规则，让局部变量的优先级甚至更低；二则是因为浏览器厂商痛恨他，因为有他不利于性能提升。由此可以看出，我们可以利用with来改变一下作用域，比如说想要屏蔽到外部的变量a，就可以给个对象里面含有同名变量名。结合第一点，我们可以写出下面的代码: ``` js var a = 1; var shadow = { a:...
> 往往有很多站点，虽然后端速度还可以，但是由于服务器在美帝，导致速度慢的抠脚，用的时候简直崩溃。众所周知，CDN是互联网重要的基础设施，然而，某些站长可能并没有上CDN这艘大船，在这时候，我们就可以用自己的手段来加速自己上网了。 下面将以建立一个简单小站，并进行CDN加速为例子描述。 ### A. 选一个免费空间，建站 随手搜了一个，选了个免费PHP共享空间的站的，[不造是什么烂站](http://www.hostinger.com.hk)。 然后，常规操作，开免费主机，选一个免费的二级域名（这个一看就是基于vhost的那种共享主机），我选了http://519.96.lt/ (感觉我需要治疗)。然后，随意选择一个建站模板，这里我选择了一个买衣服的电商，因为图片很多，势必会比较慢，比较好试出效果。 这样第一步就差不多了。 ### B. 买一个顶级域名 不乱安利了，现在pw、top之类的域名是辣条价，假设买的是`es2016.top`。然后去把DNS服务器（权威服务器）改成cloudflare提供的DNS服务器，也就是`matt.ns.cloudflare.com`和`wanda.ns.cloudflare.com `。 ### C. 弄一台自己的服务器，比如digitalocean 装上nginx，然后配上反向代理： ``` nginx upstream shop { server 519.96.lt; } server { listen...
> ValueOf是JavaScript中Object原型上少数几个方法之一，应该不能算是很偏门的函数，但是只有《JavaScript权威指南》上面有只言片语的描述，而对ES2015中相应的`Symbol.toPrimitive`更是鲜有提及。 首先，给出一个结论，`valueOf`和`toString`几乎都是在出现操作符(+-*/==> > 将Date对象转换为时间戳时，会很自然的用`+ new Date()`, 实际上是悄悄地调用了`new Date().valueOf()` 详细地说，有如下场景，会出现偏好结果是Number的`toPrimitive`，也就是说`valueOf`可能被调用（如果没有`valueOf`的话，可以被`toString`等替代）： - ToNumber 具体而言，当obj前后操作符是加法，以及减法、乘法、除法，以及调用`Number(obj)`以及`new Number(obj)`时。值得注意的是，`parseInt, parseFloat`等方法实际上不会调用`ToNumber`, 他们调用的是偏好String的`toPrimitive`。举个代码的例子: ``` javascript class Test { valueOf() { return 1; } toString() { return '2';...
> 使用webpack，babel搭建React基本开发环境，完成Hello，world。 如果下述命令不方便执行，可以直接执行`git clone https://github.com/renaesop/react-leancloud-blog.git && cd react-leancloud-blog && git reset --hard 56a9c26 && npm i`, 然后全局安装webpack之后即可构建 ### 1. 初始化npm项目，添加.gitignore等 - `git init` 初始化git项目，将会产生.git文件夹 - `echo ".idea \n node_modules \n...
> 虽然证书常常被挂在嘴边，但是证书到底有哪些类型，又分别有哪些特点，哪些坑，还是比较杂乱的，望山也找不到什么相关总结文章。那这篇文章是要总结一下吗？=。=既然你诚心地发问了，我就大发慈悲地告诉你，这篇文章只管大胆胡说，绝不小心求证，（逃 首先，安利一个站点[检测HTTPS配置](https://www.ssllabs.com/ssltest/analyze.html)。 #### 坑点1：证书在PC上、IOS上一切正常，但是到Android上就不信任 具体表现： 实际原因： 解决方案： #### 坑点2：泛域名(wildcard, SAN)证书 待续……
> 网上有很多免费又好用的服务，为了使用查找方便，在此备忘 ## 1.持续集成、代码质量 [travis－ci](https://travis-ci.org) 基本上github上标配的持续集成平台，支持多种语言，但是貌似没有windows平台的ci [appveyor](https://www.appveyor.com/) 比较好用的windows平台ci，开源项目免费 [codecov](https://codecov.io/) 很好的代码覆盖率展示平台 [coveralls](https://coveralls.io/)很多人推荐，不过笔者遇到过好几次服务挂掉的情况，而且感觉这个站点很丑 [codeclimate](https://codeclimate.com/)检查代码的坏味道，会给代码打GPA，4.0满分 [semaphoreci](https://semaphoreci.com)据TJ说是最好用的CI [gitlabci](https://ci.gitlab.com)除了无缝跟gitlab集成以外，看不出任何优势，持续集成是在docker里面跑的 ## 2.互联网基础设施系列 [cloudflare](https://www.cloudflare.com/)提供免费的DDOS防护和CDN加速服务，提供SSL，应用非常广泛，使用很方便 [letsencrypt](https://letsencrypt.org/)质量高、免费、火爆的证书