基于 esm 规范实现的 hmr 不需要单独再去实现一套模块的系统，因此在整个流程当中比较重要的一个点就是如何去实现模块之间的依赖关系，hmr 的更新也是基于模块之间的依赖关系来进行工作的。

@vue/cli 项目编译重复命中缓存问题解析 文章首发于个人blog，欢迎关注~ 背景 最近遇到一个更新了 package，但是本地编译打包后没有更新代码的情况，先来复现下这个 case 的流程： A 同学在 npm 上发布了0.1.0版本的 package； B 同学开发了一个新的 feature，并发布0.2.0版本； C 同学将本地的0.1.0版本升级到0.2.0版本...

文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack Loader 详解 前2篇文章主要通过源码分析了 loader 的配置，匹配和加载，执行等内容，这篇文章会通过具体的实例来学习下如何去实现一个 loade...

上篇文章主要讲了 loader 的配置，匹配相关的机制。这篇主要会讲当一个 module 被创建之后，使用 loader 去处理这个 module 内容的流程机制。首先我们来总体的看下整个的流程：

文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack loader 详解 loader 的配置 Webpack 对于一个 module 所使用的 loader 对开发者提供了2种使用方式： webpack config 配置形式，形如： {代码...

底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单。这个项目才开始2天，就是每天晚上抽点时间写写，速度不会很快，这周末前将前端...

webpack提供的一个非常强大的功能就是code spliting(代码切割)。 在webpack 1.x中提供了 {代码...} 利用require.ensure这个API使得webpack单独将这个文件打包成一个可以异步加载的chunk. 具体的套路见我写的另一篇blog: webpack分包及异步加载套路 一句话总结就是： 在输出的runtime代码中,包含了异步chunk的id及chunk n...

和其他语言相比,javascript中的对于undefined的理解还是有点让人困惑的。特别是试着理解ReferenceErrors错误("x is not defined")以及在编码过程中如何去避免这些错误总让人感到比较困惑。

最近一个小项目是用webpack来进行构建的。其中用到了webpack分包异步加载的功能。今天抽时间看了下webpack打包后的文件，大致弄明白了webpack分包及异步加载的套路。

由于2种机型的默认line-height不一致,这和字体、浏览器的布局模型、操作系统的字体渲染引擎，因此遇到这种情况的时候会选择手动的设置line-height的值，然后再通过margin或者padding去控制2个p标签之间的间距。

继承的话可以进行代码的复用。大白话来说：A有某属性或者方法，而B现在也需要这些属性和方法，这个时候使用继承，B继承于A。那么B就能获取的需要的属性或者方法。

你这样书写的原因是需要对2个promise的结果进行处理，由于then()接收的是上一个promise返回的结果，因此你无法通过链式写法将其连接起来。

Array.from方法主要用于将Array-Like Obj(包括DOM对象document.querySeletorAll(...))和iterable对象转化为数组。和下面说的spread操作符相比，它可以直接将Array-Like obj进行转化，而不需要这个类数组对象是iterable的。

这篇文章主要是记录下HTML5中history提供的pushState, replaceStateAPI。最后通过这些API自己实现小型的路由。

现在正是进入native里面的webview的测试。比如我要测试一个选择城市的组件： 主要的思路就是模拟用户的一系列操作，然后看测试的结果和预期是否符号。 首先还是通过控制台查看相应的DOM节点，通过macaca提供的API去获取相应的DOM元素然后触发用户操作。 以下还是在REPL环境下进行操作： {代码...} 图①: 图②： 图③： 图④...

macaca是阿里开源的基于Node.js开发的自动化测试工具，支持native,hybird,moblie web,关于macaca具体的内容参见官网macaca.

部分基本概念及内容： 单元测试： 以模块为单元，测试你代码的本身，确保你编写的模块还有逻辑正确。只要输入的值不变，输出的值也应该不发生改变 前端自动化测试： 界面回归测试 测试界面是否正常，包括文案，图片等。 功能测试 包括交互逻辑和功能模块是否符合预期。 性能测试 页面性能越来越受到关注，并且性能需要在...

物理像素：买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度.

和FlexBox弹性盒子计算规则相关的属性有： margin flex-basis flex-grow flex-shrink margin Flex容器每一行的宽度 = 每个子容器的宽度 + 子容器margin-left和margin-right的值 {代码...} 总width(400px) = 总margin(100px) + 每个item的宽度; 由于flex-basis属性值为0，剩余空间为400px，则各个子盒子会根据自身的flex-...

其中第一题，因为found为true，则接下来要对someUndefinedVariable这个变量求值，但是未定义，因此会报错，第二题found为false，则接下来要对someUndefinedVariable这个变量求值，同样未定义，也会报错。第三题输出2，第四题输出0；

还真没想到我现在正从事着我在大学里面最为惧怕的一项工作：编程。之前听同学说编程好难啊，整天对着黑白屏都看傻了，又或者听同学讲他某某的亲戚因为编程的工作强度太大，每天都没时间吃正餐，只能吃方便面，一个月后被发现死在了自己的卧室里面。种种的道听途说让我觉得编程是一项我以后碰都不想碰的工作。

css2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些'丢失'的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

本文为了解决以下问题： __proto__(实际原型)和prototype(原型属性)不一样！！！ constructor属性(原型对象中包含这个属性，实例当中也同样会继承这个属性) prototype属性(constructor.prototype原型对象) __proto__属性(实例指向原型对象的指针) 首先弄清楚几个概念： 什么是对象 若干属性的集合 什么是原型？ 原型是一...