内容简介:Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。(注意不是浏览器刷新)。我们只需要在webpack.config.js里配置好devServe即可实现自动刷新,但并不是HMR,如下:下面我们以 react 为例子,大概讲述一下如何实现HMR, 首先我们理解一下他实现的
Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。(注意不是浏览器刷新)。
webpack-dev-server实现自动刷新
我们只需要在webpack.config.js里配置好devServe即可实现自动刷新,但并不是HMR,如下:
devServer: { // 服务器根目录 contentBase: path.join(__dirname, "./src"), port: 3000, //会把打包后的资源输入到服务器根目录 + publicPath publicPath: "/", }, 复制代码
webpack-dev-server实现热更新原理(HMR)
下面我们以 react 为例子,大概讲述一下如何实现HMR, 首先我们理解一下他实现的原理,如图:
1.webpack监听到文件的变化,进行新的编译和打包,并且以简单的js对象保存在内存中。
2.webpack与devServer进行交互,告诉webpack要保存代码到内存中。
3.devServer对文件的监控,并且通过配置来告诉devServer是刷新还是进行热更新。
4.devServer通过sock.js和浏览器建立websock长链接,把webpack编译代码各阶段信息告诉浏览器(包括更新模块的hash),就是通过这一个hash来进行更新的。
5.webpack通过devServer的配置和传递给他的信息(也就是第二部监听的信息)来决定是否进行浏览器刷新或者热更新。
6.webpack的HotModuleReplacement通过JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求,服务端返回一个 json,该 json 包含了所有要更新的模块的hash值,获取到更新列表后,该模块再次通过jsonp请求,获取到最新的模块代码。这就是上图中 7、8、9 步骤。
10.HotModulePlugin将会对新旧模块进行对比,决定是否更新模块,在决定更新模块后,检查模块之间的依赖关系,更新模块的同时更新模块间的依赖引用。
11.当 HMR 失败后,回退到 live reload 操作,刷新浏览器。
实现热更新具体配置(HMR)
webpack.config.js配置如下:
devServer: { // 服务器根目录 contentBase: path.join(__dirname, "./src"), port: 3000, //会把打包后的资源输入到服务器根目录 + publicPath publicPath: "/", inline: true, hot: true, }, plugins: [ ... new webpack.HotModuleReplacementPlugin(), ] 复制代码
入口文件配置
如果已经通过 HotModuleReplacementPlugin 启用了模块热替换(Hot Module Replacement),则它的接口将被暴露在module.hot属性下面。通常,用户先要检查这个接口是否可访问,然后再开始使用它。 ——引自webpack官网
if (module.hot) { module.hot.accept(() => { ReactDom.render( <App />, document.getElementById('root') ) }) } ReactDOM.render(<App />, document.getElementById("root")); 复制代码
由于热更新并不会保存react的state状态,所以我们必须引用一个loader,react-hot-loader。
webpack.config.js配置
rules: [ ... { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: "babel-loader", options: { presets: ["@babel/env"], plugins: ["react-hot-loader/babel"] //增加 } }, ] 复制代码
entry: [ 'react-hot-loader/patch', //添加 "./src/index.js", ], 复制代码
入口文件
if (module.hot) { module.hot.accept(() => { ReactDom.render( <AppContainer> <App /> </AppContainer>, document.getElementById('root') ) }) } ReactDOM.render(<App />, document.getElementById("root")); 复制代码
##小结 webpack的HMR就到此为止啦,参考文章: zhuanlan.zhihu.com/p/30669007
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP和MySQL Web开发
Luke Welling、Laura Thomson / 武欣、邵煜 / 机械工业出版社 / 2005-12 / 78.00元
本书将PHP开发与MySQL应用相结合,分别对PHP和MySQL做了深入浅出的分析,不仅介绍PHP和MySQL的一般概念,而且对PHP和MySQL的Web应用做了较全面的阐述,并包括几个经典且实用的例子。一起来看看 《PHP和MySQL Web开发》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
HTML 编码/解码
HTML 编码/解码