在现如今，热更新早已成为前端基建中不可或缺的一环，它可以在不刷新整个页面的情况下更新页面中的部分内容，从而提高开发效率，优化开发体验。然而，在实际面试的过程中，笔者发现 80% 的人并不清楚这其中的设

babel是一个非常强大的工具，作用远不止我们平时的ES6 -> ES5语法转换这么单一。在前端进阶的道路上，了解与学习babel及其灵活的插件模式将会为前端赋予更多的可能性。 本文就是运用babel，通过编写babel插件解决了一个实际项目中的问题。 1. 遇到的问题 最近在…

前端技术变化极其快速，但是有些思想却永远不过时，插件化便是其中之一，不管 webpack babel 还是 vscode 等项目都在使用，本文将就其中的 wbpack 的插件化原理进行研究。

所有人都知道 Webpack 很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式

Webpack 一直都是有些人的心魔，不清楚原理是什么，不知道怎么去配置，只会基本的 API 使用。它就像一个黑盒，让部分开发者对它望而生畏。 而本节最大的作用，就是帮大家一点一点的消灭心魔。

一、什么是 HMR HMR 全称 Hot Module Replacement，中文语境通常翻译为模块热更新，它能够在保持页面状态的情况下动态替换资源模块，提供丝滑顺畅的 Web 页面开发体验。 HM

webpack-dev-server webpack-dev-server 是一个小型的 node.js Express 服务器, 它使用 webpack-dev-middleware 中间件来为通过 webpack 打包生成的资源文件提供 Web 服务。它还有一个通过 Socket.IO 连接着 we…

做了一夜动画，让大家十分钟搞懂Webpack 一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。 二、原理分析 首先我们通过一个制作一个打包文件的原型。 假设有两

1. awesome-typescript-loader 2. ts-loader + babel-loader + fork-ts-checker-webpack-plugin 这种方案，当 webpack 编译的时候，ts-loader 会调用 typescript（所以本…