feat: 整理 webpack 相关文章

Author: mengsixing

.editorconfig

@@ -0,0 +1,9 @@
+root  = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

README.md

@@ -48,8 +48,7 @@ npm run lint:fix
 - [js 事件](https://yhlben.github.io/blog/js-event.html)
 - [js 表单](https://yhlben.github.io/blog/js-form.html)
 - [js 跨文档消息传递和拖放 api](https://yhlben.github.io/blog/js-html5-program.html)
-- [es5 继承](https://yhlben.github.io/blog/js-inherit.html)
-- [es6 继承](https://yhlben.github.io/blog/js-inherit-es6.html)
+- [js 实现继承](https://yhlben.github.io/blog/js-inherit.html)
 - [es6 module](https://yhlben.github.io/blog/js-module.html)
 - [jsBridge 总结](https://yhlben.github.io/blog/js-jsBridge.html)
 - [函数尾递归优化](https://yhlben.github.io/blog/js-recursion.html)
@@ -92,9 +91,9 @@ npm run lint:fix
 #### | 前端工程化 相关
 
 - [nodejs 使用总结](https://yhlben.github.io/blog/project-node.html)
-- [webpack 整体流程分析](https://yhlben.github.io/blog/project-webpack-entry.html)
-- [webpack 打包 modules 流程分析](https://yhlben.github.io/blog/project-webpack-flow.html)
-- [webpack 使用总结](https://yhlben.github.io/blog/project-webpack.html)
+- [Webpack 系列（一）使用总结](https://yhlben.github.io/blog/project-webpack.html)
+- [Webpack 系列（二）手写模块打包代码](https://yhlben.github.io/blog/project-webpack-flow.html)
+- [Webpack 系列（三）打包 modules 流程分析](https://yhlben.github.io/blog/project-webpack-entry.html)
 - [commitlint 使用总结](https://yhlben.github.io/blog/project-commitlint.html)
 - [前端测试](https://yhlben.github.io/blog/project-test.html)
 - [怎样选择图片格式？](https://yhlben.github.io/blog/project-image.html)

docs/.vuepress/config.js

@@ -33,13 +33,13 @@ module.exports = {
         "css-useful",
         'js-this',
         'project-commitlint',
-        // 'project-webpack-entry',
-        'project-webpack-flow',
         'operation-web-login',
         'library-react-hooks',
         'js-operator-priority',
         "other-tools",
         "other-vscode",
+        'project-webpack-entry',
+        'project-webpack-flow',
         "project-webpack",
         "library-react",
         "library-vue",
@@ -53,7 +53,6 @@ module.exports = {
         "frontend",
         "css-devicePixelRatio",
         "js-module",
-        "js-inherit-es6",
         "js-inherit",
         "js-form",
         "js-html5-program",

docs/blog/frontend.md

@@ -21,6 +21,7 @@
 - 预处理器 less，sass，stylus，css-next
 - 后处理器，postcss 插件，autofixer 等
 - css modules
+- css in js
 
 ## javascript 方向
 
@@ -61,9 +62,8 @@
 - 微信小程序
 - 支付宝小程序
 - 百度小程序
-- 头条小程序
-- 抖音小程序
-- 多端统一框架：taro
+- 字节跳动小程序
+- 多端统一框架：taro，chameleon
 
 ### ajax 请求
 

docs/blog/js-inherit-es6.md

@@ -1,34 +1,27 @@
-# ES5 继承
-
-## 原型链
-
-重写原型对象，代之以一个数新类型实例。
-
-> 问题：引用类型所有实例共享，无法向超类型传参，会影响其他子元素。
-
-## 借用构造函数
-
-子类型构造函数内部调用超类型构造函数，call，apply。
-
-> 问题：函数复用无从谈起
-
-## 组合继承
-
-使用原型链实现对原型属性和方法的继承，用构造函数类实现对实例属性的继承。
-
-> 缺点：执行 2 次
-
-## 原型继承
-
-Object.create()
-
-> 返回新对象，原型指向传入对象。
-
-## 寄生式继承
-
-在 Object.create()的基础上，增加自定义属性和方法来增强对象。
-
-## 寄生组合式继承
+# JS 实现继承
+
+JS 中可以通过多种方式来实现继承，我们来仔细分析一下。
+
+## ES5 中的继承
+
+ES5 中可以通过如下方式实现继承：
+
+- 原型链
+  - 重写原型对象，代之以一个新的类型实例。
+  - 问题：引用类型所有实例共享，无法向超类型传参，会影响其他子元素。
+- 借用构造函数
+  - 子类型构造函数内部调用超类型构造函数，call，apply。
+  - 问题：函数复用无从谈起
+- 组合继承
+  - 使用原型链实现对原型属性和方法的继承，用构造函数类实现对实例属性的继承。
+  - 问题：执行 2 次
+- 原型继承
+  - Object.create()
+  - 返回新对象，原型指向传入对象。
+- 寄生式继承
+  - 在 Object.create()的基础上，增加自定义属性和方法来增强对象。
+- 寄生组合式继承
+  - es5 中完美解决方案
 
 ```js
 function inherit(subType, superType) {
@@ -53,3 +46,42 @@ var instance2 = new SubType(456);
 console.log(instance.age);
 console.log(instance2.age);
 ```
+
+## ES6 中的继承
+
+ES6 采用 class extends 进行继承。和 ES5 继承的区别：
+
+- ES5 的继承实质是先创造子类的实例对象 this，然后再将父类的方法添加到 this 上面。
+- ES6 的继承实质是先创造父类的实例对象 this，然后再用子类的构造函数修改 this。
+
+### super
+
+使用 super 的时候，必须显示指定是作为函数还是作为对象使用，否则会报错。
+
+super 调用父类的方法时，super 会绑定子类的 this。
+
+### __proto__属性
+
+每一个对象都有__proto__属性，指向对应的构造函数的 prototype 属性。
+
+子类的__proto__属性表示构造函数的继承，总是指向父类。
+
+子类 prototype 的__proto__属性表示方法的继承，总是指向父类的 prototype 属性。
+
+```js
+class A{}
+class B extends A{}
+
+console.log(B.__proto__ ===A); // true
+console.log(B.prototype.__proto__ ===A.prototype); // true
+```
+
+### 继承目标
+
+只要是一个有 prototype 属性的函数，就能被继承。
+
+根据 ES5 和 ES6 继承的区别，可以得出如下结论：
+
+ES5 无法继承内置构造函数，Boolean，Number，String，Array，Date，Function，RegExp，Error，Object。
+
+ES6 可以，但继承 Object 不行，（特例，因为无法向父类 object 传参）。

docs/blog/js-inherit.md

@@ -1,21 +1,26 @@
-# ES6 module
+# ES6 模块化
 
-## ES6 之前的模块
+介绍一下 ES6 中的模块化。
+
+## ES6 之前的模块化
 
 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。
 
 - CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
 
-## ES6 模块
+## ES6 中的模块化
+
+ES6 模块化有以下特点：
 
 - 自动采用严格模式。
-- ES6 可以在编译时完成模块加载。
+- 在编译时完成模块加载。
 
 ### export 模块
 
 用于规定模块的对外接口。
 
 - export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
+- export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域，就会报错（违背了静态化初衷）。
 
 ```js
 // 报错
@@ -37,11 +42,9 @@ var n=1;
 export {n as m}
 ```
 
-- export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域，就会报错（违背了静态化初衷）。
-
 ### import 命令
 
-用于输入其他模块提供的功能。
+用于导入其他模块。
 
 - import 命令具有提升效果，会提升到整个模块的头部并首先执行。
 
@@ -50,6 +53,7 @@ export {n as m}
 - 由于 import 是静态执行的，不能使用表达式和变量，只有在运行时才能得到结果的语法结构。
 
 ```js
+// 报错
 import { 'a' + 'bcd' } from 'my_module'
 ```
 
@@ -91,9 +95,7 @@ export { MyClass as default } ;
 
 ### import() 方法
 
-动态加载模块，可以在条件运算，表达式中使用。
-
-返回一个 promise 对象。
+动态加载模块，可以在条件运算，表达式中使用。**返回一个 promise 对象**。
 
 import() 类似于 node 的 require 方法，区别主要是，前者是异步加载，后者是同步加载。
 
@@ -120,7 +122,7 @@ import("my_module").then(res => {
 <script type="module" scr="foo.js" />
 ```
 
-- 代码是在模块作用域之中云进行，而不是在全局作用域中运行。
+- 代码是在模块作用域之中进行，而不是在全局作用域中运行。
 
 ### ES6 模块和 commonjs 模块的差异
 
@@ -165,7 +167,7 @@ import 'foo'
 
 #### commonjs 模块循环加载
 
-commonjs 模块循环加载，值输出已执行的部分，还未执行的额部分不会输出。
+commonjs 模块循环加载，只输出已执行的部分，还未执行的部分不会输出。
 
 ```js
 // a.js

docs/blog/js-module.md

@@ -80,14 +80,14 @@ vue 内置了这么多的指令， 这些指令都会抛出两个接口 bind 和
 
 ::: tip vue 异步更新
 
-Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。
+Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个异步队列，并缓存在同一事件循环中发生的所有数据改变。
+
+Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel（基于 postMessage），如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。
 
 如果同一个 watcher 被多次触发，只会被推入到队列中一次（这在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要）。
 
 然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
 
-Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel（MutationObserver 等），如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。
-
 修改数据 -> 触发 set-> 执行同步代码，如果有数据更新，则开启异步队列。
 
 -> 异步队列中进行去重操作，并注入 nextTick 回调函数。

docs/blog/library-vue.md

@@ -4,6 +4,20 @@
 
 ### 三次握手
 
+第一次握手
+
+客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。
+
+第二次握手
+
+服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。
+
+第三次握手
+
+当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。
+
+PS：第三次握手中可以包含数据，通过快速打开（TFO）技术就可以实现这一功能。其实只要涉及到握手的协议，都可以使用类似 TFO 的方式，客户端和服务端存储相同的 cookie，下次握手时发出 cookie 达到减少 RTT 的目的。
+
 ### 四次挥手
 
 ## 滑动窗口