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

Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。 而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类Tapable。 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 Compiler、Com…

webpack5实现自定义plugins 项目源代码传送门 plugins相关文档地址：https://webpack.docschina.org/api/plugins 插件介绍 使用阶段式的构建回

中无主而不止，外无正而不行。——庄子 现在前端开发基本上都会用到react、vue，用到了前端mvc、mvvm框架，基本上都会涉及到打包发布，打包常用的工具就是webpack、gulp等等。经常使用自然也要了解一些他大致的流程也会方便使用。 Entry: 指定webpack开始…

说明一点看webpack的编译流程非常枯燥，即使看完理解之后也不见得能对本上有很多帮助。 Entry: 指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库。 Module: 模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。W…

「万字解析」详解 Tapable 核心工作机制，Webpack Plugin 必备前置知识解读。从原理玩转 Webpack ，真正精通所谓工程化前端。

祸兮福之所倚，福兮祸之所伏。——老子 bundle、module、chunk 都是 webpack 中的术语，下面就一个一个介绍他们的定义是什么，怎么产生的。 Bundle是由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。 **Bundle 分离…

html-webpack-plugin 的作用是：当使用 webpack打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。 html-webpack-plugin 默认将会在 output.path 的目录下创建一个 i…

用某度翻译后：“该插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。” 搭建个简单的Wenpack Demo，演示一下。 先安装MiniCssExtractPlugin插件。 安装成功后，在webpack…