最近在解决 Vue3 的 JSX 不支持热更新的问题，所以较为深度地研究了 Webpack 的热更新的原理，以及应该如何实现 Vue3 的组件热更新，本文就来深度分析一下关于 Webpack 热更新的原理和实现。需要注意的是热更新不是 Webpack 的专利，其他的打包工具也是有的，并且会有一些区别。本文主要关注 Webpack。

在很长的一段时间中，Vue 官方都以简单上手作为其推广的重点。这确实给 Vue 带来了非常大的用户量，尤其是最追求需求开发效率，往往不那么在意工程代码质量的国内中小企业中，Vue 占据的份额极速增长。但是作为开发者自身，我们必须要认清一个重点，简单易用重来不应该在技术选型中占据很大的份额，可维护性才是。

本文是我新开的坑的第一篇文章，这个坑就是vue3，接下来我会围绕着vue3进行一系列的动作，包括但不限于： 完整的源码解析 jsx工程最佳实践 个性化的jsx方案 vue3生态库开发（目前有一个正在进行） 以及可能的自定义一个vue3的runtime 关于源码解析，网站已经上线，vue3源码解析，最佳实践，网站是逐行代码形式的解析，更...

React16.3发布了新的Context API，并且已经确认了将在下一个版本废弃老的Context API。所以大家更新到新的Context API是无可厚非的事情。而这篇文章会从原理的角度为大家分析为什么要用新的API--不仅仅是因为React官方要更新，毕竟更新了你也可以用16版本的React来使用老的API--而是因为新的API性能比老API 高出太多

React16.5正式在devtool中加入了Profiler功能，用于收集每次变更导致的渲染时间，帮助开发者发现潜在的性能问题，有助于开发更高性能的React应用

不知道大家对于Controlled Input的概念好不好奇，我在最开始用React的时候就对其非常感兴趣，然而奈何那时候能力不够，也没那么多时间去看源码，所以一直处于猜测而没有去证实的阶段。在后来使用Vue进行开发的时候，我还自己实现过类似的组件，那时候是通过preventDefault keyDown事件来阻止自动更新，实现了大致的功能...

关于React中一些代码设计 最近在看React的源码，注意到了一些有意思的细节，比如经常会出现的一下比较和赋值代码 {代码...} 对于平时基本上没怎么用到过移位运算的我一开始表示这是啥？为啥要这么设计？ 我们先来看一下，这个effectTag具体会有那些值 {代码...} 这么一看貌似好像有点意思，可以看到大部分的值都只有一位...

require import 动态评估 静态评估 再运行时报错 再解析时报错 不是关键词 是关键词 语法 CommonJs dep.js {代码...} app.js {代码...} ESM dep.js {代码...} app.js {代码...} 加载方式的不同 使用require的时候，其实会将module的代码进行包装，变成如下样子的代码： {代码...} 然后在执行这个方法的时候，我们可以传...

最近发现还是有听过人看这篇文章，所以再来更新一下。首先现在webpack4已经稳定，各个插件和loader基本上直接装都可以版本匹配，比如html-webpack-plugin，如果有不匹配的看peerDependencies提醒，会提示你需要安装新的版本。还有就是extract-text-webpack-plugin作者好像不想维护了，现在可以用mini-css-extract-plugin...

童鞋，你看到这篇文章的时候很可能你只是在找一篇webpack的配置文章教学，但是听老哥说一句，别去搜什么startkit或者best practice文章，特别是中文的，如果你找到了，也记得看一下文章啥时候写的，超过半年的文章就别看了，百分之92.6里面的内容已经过期了。你想学webpack相关的姿势，最好的办法就是：看文档

是不是很奇怪，类似alert这种组件，讲道理我们还是更习惯直接alert("xxx")这样的使用方式，因为这类组件是上下文无关的，没必要在业务场景中先定义。

这可能是个一直存在的问题，但是平时不多关注，但是在chrome升级到53之后，这个问题突然变得非常严重 {代码...} 这个写法是为了在弹出选择文件窗口的时候只显示图片文件。然而现在这么做会让选择文件窗口弹出变得非常的慢，现在的解决方法是指定文件格式 {代码...}

这段时间折腾了一个vue的日期选择的组件，为了达成我一贯的使用舒服优先原则，我决定使用directive来实现，但是通过这个实现有一个难点就是我如何把时间选择的组件插入到dom中，所以问题来了，我是不是又要看Vue的源码？

vue的双向绑定是基于响应式来做的，即给一个Vue对象的属性加上getter, setter方法，在这些方法中处理双向绑定。但这种方式就会出现下面这些坑

$els中的每个对象会copy一份实际的Vue对象(vm)的数据放在外面，改变这些数据并不会反应到实际的Vue对象上，如果我们希望真的改变对象的数据，有一个隐藏属性可以做到就是__vue__

do only a single taskLoaders can be chained. Create loaders for every step, instead of a loader that does everything at once. This also means they should not convert to JavaScript if not necessary. Example: Render HTML from a template file by applying the query parameters I could write a loader t...

在目前的开源市场，前端架构中最火热的项目非webpack莫属了。在使用webpack的过程中，我们会用到各式各样的loader，毫无疑问，因为loader机制的存在让webpack拥有了无限的可能性，让webpack几乎可以容纳一切前端需要的资源。同时合理得利用loader也有助于我们在架构项目的时候省去很多重复工作，今天我们就来讲讲如何创...

最近公司的项目选型使用了vue，所以用vue开发了一个项目，期间在处理一些动画的时候，发现vue-transition虽然用起来简单，但是局限性很大，比如无法处理一个组件中父子元素的联动动画。这就极大得限制了我们的发挥，你只能进行单层次的动画，类似modal这种两种动画联动的就很难做，你很可能需要分成两个组件来做，这就不...

作为新时代的前端，我们现在很多的项目都已经使用npm作为包管理器了，我们会把一些通用组件发布到npm，但是有时候一些组件涉及到业务或者安全方面的，我们不希望把包发布到所有人都能看到的npm上，这时候我们就需要有一个私有的npm资源库。这里我们选用sinopia来搭建我们自己的npm，然后利用docker来进行打包和部署.

Because the Docker daemon uses Linux-specific kernel features, you can’t run Docker natively in OS X. Instead, you must use docker-machine to create and attach to a virtual machine (VM). This machine is a Linux VM that hosts Docker for you on your Mac.

上一篇文章讲解了redux如何使用，本篇文章将进一步深入，从redux的源码入手，深入学习redux的中间件机制。在这里我们会以一个redux-thunk中间件为例，逐步分解redux的中间机制如何操作，如何执行。

在react火热的年代，flux作为fb提出的最适合react的数据模型，时下有非常多的实现。而redux作为在众多的flux地实现中脱颖而出，及其精简的代码，却能带来实用的功能，正好自己的项目中要用，所以让我们来分析redux