webpack基础篇(十一):热更新以及其原理

简介: webpack基础篇(十一):热更新以及其原理

说明

玩转webpack课程学习笔记。



热更新:webpack-dev-server(WDS)


安装命令:npm i webpack-dev-server -D

1、WDS 不刷新浏览器。


   webpack-dev-server 默认是会在内容编译完成后自动刷新(liveload)浏览器的,此处增加了 HotModuleReplacementPlugin 插件之后可以做到 HMR 的。如果 HMR 失败的化会降级使用 liveload 自动刷新浏览器模式。


2、WDS 不输出文件,而是放在内存中。(watch是放到本地磁盘)


3、使用 HotModuleReplacementPlugin(HMR) 插件。


   webpack 构建出来的 bundle.js 本身是不具备热更新的能力的, HotModuleReplacementPlugin 的作用就是将 HMR runtime 注入到 bundle.js,使得 bundle.js 可以和 HMR server 建立 websocket 的通信连接


4、增加命令webpack-dev-server --open,--open表示开启浏览器。


{
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  }
}



5、webpack配置

添加pluginsdevServer,将mode改成development环境。

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};


6、执行命令npm run dev

执行完会自动打开浏览器,显示如下:(修改文件里的代码就会自动更新:不需要手动刷新一下浏览器)

20200621162121554.PNG




WDS 与 HMR



单独写两个包也是出于功能的解耦来考虑的。


简单来说就是:hot-module-replacement-plugin 包给 webpack-dev-server 提供了热更新的能力。


1、webpack-dev-server(WDS)的功能提供 bundle server 的能力,就是生成的 bundle.js 文件可以通过 localhost://xxx 的方式去访问,另外 WDS 也提供 livereload(浏览器的自动刷新)。


2、hot-module-replacement-plugin 的作用是提供 HMR 的 runtime,并且将 runtime 注入到 bundle.js 代码里面去。一旦磁盘里面的文件修改,那么 HMR server 会将有修改的 js module 信息发送给 HMR runtime,然后 HMR runtime 去局部更新页面的代码。因此这种方式可以不用刷新浏览器。




热更新:使用 webpack-dev-middleware(WDM)


1、WDM 将 webpack 输出的文件传输给服务器


2、适用于灵活的定制场景

constexpress = require('express');
constwebpack = require('webpack');
constwebpackDevMiddleware= require('webpack-devmiddleware');
constapp = express();
constconfig = require('./webpack.config.js');
constcompiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
  }
));
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});


热更新的原理分析


热更新最核心的是 HMR ServerHMR runtime


热更新分两个阶段:


   启动阶段还是依赖磁盘文件去编译(如图:1 -> 2 -> A -> B);

   更新阶段是直接内存增量更新的(如图:1 -> 2 -> 3 -> 4)。


1、Webpack Compile: 将 JS 编译成 Bundle


2、HMR Server: 将热更新的文件输出给 HMR Rumtime

   HMR Server 是服务端,用来将变化的 js 模块通过 websocket 的消息通知给浏览器端。


3、Bundle server: 提供文件在浏览器的访问


4、HMR Rumtime: 会被注入到浏览器,更新文件的变化

   HMR Runtime 是浏览器端,用于接受 HMR Server 传递的模块数据,浏览器端可以看到 .hot-update.json 的文件过来。


5、bundle.js: 构建输出的文件


20200621162048969.PNG



目录
相关文章
|
JavaScript 前端开发 API
webpack核心原理-2
webpack核心原理-2
77 0
|
19天前
|
监控 前端开发 JavaScript
Webpack 中 HMR 插件的工作原理
【10月更文挑战第23天】可以进一步深入探讨 HMR 工作原理的具体细节、不同场景下的应用案例,以及与其他相关技术的结合应用等方面的内容。通过全面、系统地了解 HMR 插件的工作原理,能够更好地利用这一功能,为项目的成功开发提供有力保障。同时,要不断关注技术的发展动态,以便及时掌握最新的 HMR 技术和最佳实践。
|
19天前
|
缓存 前端开发 JavaScript
Webpack 动态加载的原理
【10月更文挑战第23天】Webpack 动态加载通过巧妙的机制和策略,实现了模块的按需加载和高效运行,提升了应用程序的性能和用户体验。同时,它也为前端开发提供了更大的灵活性和可扩展性,适应了不断变化的业务需求和技术发展。
|
19天前
|
缓存 前端开发 JavaScript
webpack 原理
【10月更文挑战第23天】Webpack 原理是一个复杂但又非常重要的体系。它通过模块解析、依赖管理、加载器和插件的协作,实现了对各种模块的高效打包和处理,为现代前端项目的开发和部署提供了强大的支持。同时,通过代码分割、按需加载、热模块替换等功能,提升了应用程序的性能和用户体验。随着前端技术的不断发展,Webpack 也在不断演进和完善,以适应不断变化的需求和挑战。
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
2月前
|
JavaScript 前端开发
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler,帮助读者理解Webpack的工作原理,包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。
|
3月前
|
缓存 前端开发 JavaScript
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
133 1
|
6月前
|
API 开发工具 开发者
webpack热更新原理
Webpack的Hot Module Replacement(HMR)提升开发效率,无需刷新页面即可更新模块。开启HMR需在配置中设`devServer.hot: true`。Webpack构建时插入HMR Runtime,通过WebSocket监听并处理文件变化。当模块改变,Webpack发送更新到浏览器,HMR Runtime找到对应模块进行热替换,保持应用状态。开发者可利用`module.hot` API处理热替换逻辑。
|
6月前
|
前端开发 测试技术 开发者
深入理解 Webpack 热更新原理:提升开发效率的关键
深入理解 Webpack 热更新原理:提升开发效率的关键
|
6月前
|
缓存 前端开发 算法
Webpack 进阶:深入理解其工作原理与优化策略
Webpack 进阶:深入理解其工作原理与优化策略
171 2