在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具。它打包开发代码，输出能在各种浏览器运行的代码，提升了开发至发布过程的效率。

webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。Tapable暴露出挂载plugin的方法，使我们能 将plugin控制在webapack事件流上运行（如下图）。

首先我们来看一下为什么需要loader，以及他能干什么?webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

先来几道面试题1、a.meituan.com 和 b.meituan.com 这两个域能够共享同一个 localStorage 吗？2、在 webview 中打开一个页面：i.meituan.com/home.html，点击一个按钮，调用 js 桥打开一个新的 webview：i.meituan.com/list.html，这两个分属不同webview的页面能共享同一个 localStorage 吗？3、如果 localStorage 存满...

本文示例源代码请戳github博客，建议大家动手敲敲代码。 前言 浏览器渲染页面的过程 从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上： DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户端渲染 本文讨论第五个部分，即浏览器对内容的渲染，这一部分（渲染树构建、布局及绘制），又可以分为下...

一般来说，当一个请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

作为互联网通信协议的一员老将，HTTP 协议走到今天已经经历了三次版本的变动，现在最新的版本是 HTTP2.0，相信大家早已耳熟能详。今天就给大家好好介绍一下 HTTP 的前世今生。

GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

前言：使用react也有二年多了，一直停留在使用层次。虽然很多时候这样是够了。但是总觉得不深入理解其背后是的实现逻辑，很难体会框架的精髓。最近会写一些相关的一些文章，来记录学习的过程。

1、基本语法回顾 我们先来回顾下箭头函数的基本语法。ES6 增加了箭头函数： {代码...} 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 {代码...} 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。 {代码...} 下面是一种特殊情况，虽然可以运...

前言: 面试的时候我们经常会被问答js的数据类型。大部分情况我们会这样回答包括1、基本类型（值类型或者原始类型）： Number、Boolean、String、NULL、Undefined以及ES6的Symbol2、引用类型：Object、Array、Function、Date等我曾经也是这样回答的，并且一直觉得没有什么问题。

由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。

1、constructor 首先我们都知道Promise 有三个状态，为了方便我们把它定义成常量 {代码...} 接下来我们来定义一个类 {代码...} 到这基本比较好理解我简单说明一下 executor：这是实例Promise对象时在构造器中传入的参数，一般是一个function(resolve,reject){} state：`Promise的状态，一开始是默认的pendding状态，每当...

如果对flex不是很熟悉的同学，可以看一下我的另一篇文章Flex 布局 1、网格布局 1.1、基本网格布局 最简单的网格布局，就是平均分布。HTML代码如下。 {代码...} CSS代码如下。 {代码...} 这里最关键的就是flex:1使得各个子元素可以等比伸缩 1.2、百分比布局 某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。H...

在没有接触Flex之前一直使用float、display、position 。说实话用起来非常恶心。当使用Flex时，我们可以简洁优雅实现复杂的页面布局

更多系列文章请看 在实现之前我们可以通过阮一峰的ECMAScript 6 入门了解一下Set的基本信息 1、Set的基本语法 {代码...} 可以传递一个可迭代对象，它的所有元素将被添加到新的 Set中。如果不指定此参数或其值为null，则新的 Set为空。 {代码...} 1.1 实例属性和方法 属性 constructor: Set的构造函数 size: Set 长度 操...

解构赋值的规则是，若等号右边的值不是对象或者数组，就会先将其转化成对象。由于undefined和null无法转化成对象，所以对其进行解构赋值时会报错。

var 命令经常会发生变量提升现象，按照一般逻辑，变量应该在声明之后使用才对。为了纠正这个现象，ES6 规定 let 和 const 命令不发生变量提升，使用 let 和 const 命令声明变量之前，该变量是不可用的。主要是为了减少运行时错误，防止变量声明前就使用这个变量，从而导致意料之外的行为。

前言：这周工作碰到了移动端1px的问题。以前一直写样式也没有特别注意着一点。还有就是rem的原理。这些其实就是比较常见的移动端适配问题。现阶段比较主流的适配方案有二种。一种是flexible + rem,另一种是vw

Redux作为大型React应用状态管理最常用的工具。虽然在平时的工作中很多次的用到了它，但是一直没有对其原理进行研究。最近看了一下源码，下面是我自己的一些简单认识，如有疑问欢迎交流。