解析 webpack 核心流程与插件架构，理解： - Webpack 从启动到输出 bundle，内部逻辑流转过程 - 编写 webpack 插件前，你需要弄清楚哪些问题

「万字解析」300行代码梳理webpack核心工作流源码，从工程化出发，真正搞懂webpack背后打包机制。带你走进webpack生态开发的世界，真正对应用webpack了然于胸。

背景 我们知道编程语言主要分为「编译型语言」和「解释型语言」，编译型语言是在代码运行前编译器将编程语言转换成机器语言，运行时不需要重新翻译，直接使用编译的结果就行了。

先上灵魂拷问 在文章之前，先抛一些灵魂拷问： 前端代码从 tsx/jsx 到部署上线被用户访问，中间大致会经历哪些过程？ 上述过程中分别都有哪些考虑、指标和优化点，以满足复杂的业务需求？ 可能大部分同

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。…

什么是模块热更新？ 下面我们运行一个例子来更直观的感受什么是模块热更新。 视频中，我修改了字体颜色，页面会立即更新，但输入框中的内容依然保留着。HMR就是帮助我们实现了这样一个效果，不然我们在每次修改

文章重点讲的是贴合实际场景把灰度方案落地，也列了一些常见的灰度发布方案做比较，在文章结尾给大家留了一些相关的代码，方案千千万，选择自己业务场景符合最重要

通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。 DefinePlugin中的每个键，是一个标识符或者通过.作为多个标识符。 如果value是…

提到前端打包工具，毫无疑问想先到的是webpack。但是前端发展地很快，时不时会有新东西出现，打包工具这边之前也出现parcel和rollup。各种工具的碰撞，相互汲取优点，促进技术的发展。 webpack4中支持了零配置的特性，同时对块打包也做了优化，CommonsChunk…