参考:
hmr技术支持程序运行时的模块(amd、commonJS等)的修改、添加和删除,而不用整个程序重新加载,这可以提升开发的效率:
hmr后程序的状态可以得到保存
仅仅改变变化的部分,其余不变
调样式更加快捷,基本比得上在浏览器中的样式修改
以下步骤允许模块在应用程序中切换:
app请求hmr runtime来检查模块更新
runtime异步下载更新和通知app
app请求runtime去应用这些更新
runtime同步地应用这些更新
在编译器中
编译器需要提交一个update来执行更新,更新的内容有如下两部分:
清单文件(json),包含了新的编译hash和要更新的chunk列表。
一个或多个chunk(js),每个chunk包含了所有要更新的模块的新代码(或者一个标志位代表模块要被移除)
编译器能保证这些模块和chunk的id在构建中始终是唯一的,这些id保存在webpack-dev-server的内存中,也可以保存在一个json文件中。
在模块中
hmr是一个可选的功能,仅仅会影响包含了hmr代码的模块。如style-loader实现了hmr接口,当它受到一个hmr的更新,这个loader就会去用新的样式去替换旧的样式。
当在模块中实现hmr接口,我们可以决定当模块需要更新的时候,让模块去做我们想做的事情。当模块没有写hmr时,对应的更新就会被往上冒泡,会导致整颗依赖树都被重新加载。
对于module.hot 的更多信息可以在 HMR API page 查看。
在运行时
这里关注的是更加细节的东西,如果不感兴趣,可以直接去了解 HMR API page 或者 HMR guide
对于模块系统的运行,额外的代码用于追踪模块parents和children。有两个方法check和apply可以用来管理。
check:创建一个http请求来更新清单文件。http请求失败的话则更新不可用,请求成功的话,一个新的chunk列表会用于与当前已经加载好的chunk进行对比,当所有需要更新的chunk已经下载好而且准备好了,则进入ready状态。
apply:这个函数把所有的模块标记为不可用,不可用的模块或者父模块需要有一个update handler,否则这个这个标记会冒泡,使所有的祖先模块被标记为不可用。标记会一直冒泡,直到到达app的入口文件或者被update handler所处理。
最后,所有的不可用模块都被配置(通过dispose handler)和卸载,当前的hash值被更新,所有的accept handler都被调用。hmr rumtime到这里切换为空闲状态。
webpack-dev-server
webpack-dev-server通过hot模式来支持hmr。以下记录以下步骤:
使bundle的内存输出路径与硬盘路径一致,具体可以去参考 自动刷新
然后启用插件
plugins: [newwebpack.NamedModulesPlugin(),newwebpack.HotModuleReplacementPlugin()
]
启用devServer的hot模式
devServer: {
hot:true}
在模块中进行处理
if(module.hot){
module.hot.accept("./modules/utils",function(){
console.log("当上面的模块发生修改,这里的代码会执行")
})
}
最重要的一点,导入的模块不能使用require,而是使用import .. from形式。以上回调函数执行的时候,可以认为导入的内容已经发生变化(ES6只读地址指向的内容已经变化,可以直接使用)
对于样式的处理,以上123点,接着配置添加style、css-loader,然后在入口文件中引入样式:import './stl.css' 这样配置之后,修改样式文件,浏览器界面马上发生变化,效果就像是F12来修改样式一样。
React Hot Loader
按照 文档 的步骤:
配置文件
var path = require('path');
const webpack= require('webpack')
module.exports={
entry: {
app:['react-hot-loader/patch', './main.jsx']
},
plugins: [newwebpack.NamedModulesPlugin(),newwebpack.HotModuleReplacementPlugin()
],
output: {
filename:'bundle.js',
path: path.resolve(__dirname,'dist'),
publicPath:"dist"},
devServer: {
contentBase:'.',
hot:true},
module: {
rules: [
{
test:/\.jsx?$/,
exclude:/(node_modules|bower_components)/,
use: {
loader:'babel-loader',
options: {
presets: [["es2015", { "modules": false }],'react'],
plugins:["react-hot-loader/babel"]
}
}
}
]
}
};
View Code
入口文件
import React from 'react'import ReactDOM from'react-dom'import { AppContainer } from'react-hot-loader'import App from'./App.jsx'const render= Component =>{
ReactDOM.render(
,
document.getElementById('root')
)
}
render(App)if(module.hot) {
module.hot.accept('./App.jsx', () =>{
render(App)
})
}
View Code
App.jsx
import React from "react"exportdefaultclass App extends React.Component{
render(){return
}
}
View Code
依赖
{"name": "h2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","srv": "webpack-dev-server","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","react": "^16.2.0","react-dom": "^16.2.0","react-hot-loader": "^3.1.3","webpack": "^3.10.0","webpack-dev-server": "^2.10.1"}
}
View Code
实践的时候发现有一点很重要:要求webpack和webpack-dev-server必须都在本地安装,而不是一个全局安装,一个本地安装。否则会导致热更新无效,而且不报错,bundle.js引入了不同的文件:
两个都本地本地安装就可以解决问题了,再次查看bundle.js,引用的emitter.js路径就都一样了。
Vue Loader
其他链接