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

上一节我们解决了工程的开发调试问题，项目的生产和开发环境也已配置完成，还约定了 Webpack 配置文件规范。但它还很粗糙，这一节我们就来一起打磨这套配置。 在之前的配置中我们使用使用 MiniCssExtractPlugin.loader 来代替 style-loader ，…

webpack4可以零配置打包，webpack4会默认对src目录下的index.js文件打包。 现在运行npx webapck，可以在demo1目录下看到dist目录，dist目录下有一个main.js文件，这就是打包后的文件，打开查找可以看到 console.log(dem…

这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 可以清晰的看到antd和react-dom就占了一半多，下面来优化。 1. 修改mode 2.…

本文首发于CSDN网站，下面的版本又经过进一步的修订。原文：webpack与browser-sync热更新原理深度讲解本文包含如下内容： webpack-hot-middlewareEventSourceCORSnginx配置browser-syncWebSocket支持性Fr…

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度,将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件中。在之后的构建过程中不会再对这些模块进行编译，而是直接使用 D…

webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。webpack它做的事情是，分析你的…

本文以剖析webpack-dev-server源码，从零开始实现一个webpack热更新HMR，深入了解webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware的实现机制，彻底搞懂他们的原理，在面试过程中这…

其实没什么太多可以说的，上述大家如果体验过那么大致知道原理。其中iframe是想对成本最低的，或者说侵入性最小的。其余两种成本较高。但是总体而言并非不可接受。 其实这个构建模式我之前就用了，只是那会csdn文章迁移过来。就厚颜无耻的再用一次了。 最近进了新公司，感受了别人公司的…