1.前端常见工具之间的定位与联系，如webpack、rollup、vite、vue-cli等。 2.从运行原理、构建方式、HMR热更新机制、使用成本等方面逐一去分析，vite与webpack之间的差异

如果只是 Babel 可能真没有必要,问题是其背后的原理在我们开发中应用过于广泛了,包括不限于: eslint jshint stylelint css-in-js prettier jsx vue-template uglify-js postcss less 等等等等,从模…

在前端技术发展日新月异的今天，前端工程化已经成了每个前端工作/学习者的必备知识，一文带你吃透webpack

本文大部分篇幅都 focus 在 Tapable 框架，详细枚举了 Tapable 提供的钩子及各类型钩子的特点、运行逻辑、实现原理，并进一步讨论 Tapable 框架在 webpack 的作用

一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确

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

本文通过对webpack5的module federation的相关配置，对打包后代码进行梳理，了解其运行时的相应状态，在从源码出发，简易的对webpack federation的大包流程进行阐述；

为了解决上述问题，脚手架就起到一个至关重要的角色，我们可以通过脚手架来约束好规范，统一的配置，来打通新项目的开发工具链，一方面提升开发效率，一方面则提高项目对接可维护性及新员工熟悉项目简易性。

我们在Webpack基础篇介绍了多种loader和plugin以及每种的用途；那么他们两者在webpack内部是如何进行工作的呢？让我们手写一个loader和plugin来看看它内部的原理，以便加深对webpack的理解。 因此我们就来尝试写一个less-loader和styl…