本文详细解析 webpack-hot-middleware 在开发环境中遇到的四个典型错误：找不到 __webpack_hmr、hot-update.json 404、AJAX 跨域限制以及 OccurenceOrderPlugin 构造器报错。通过修正 entry 配置、设置绝对 publicPath、统一访问域名及更正插件名称，可快速恢复热更新功能。
修复 __webpack_hmr 找不到错误
错误1：找不到__webpack_hmr
GET http://127.0.0.1/__webpack_hmr 404 (Not Found)在 webpack 的 entry 配置中添加引用路径 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true'，相关的参数最好不要省略，否则会出现无法自动刷新的问题。
处理脚本如下：
// 准备webpack配置信息
let hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true',
wpConfig = require('./webpack.config'),
// 准备修改配置信息
entries = Object.keys(wpConfig.entry)
// 添加热加载信息
entries.forEach((key) => {
wpConfig.entry[key].push(hotMiddlewareScript);
})
// 添加插件信息
if(wpConfig.plugins === undefined) {
wpConfig.plugins = []
}
// 添加热加载插件
wpConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin())解决 hot-update.json 404 问题
错误2：找不到hot-update.json
main.bundle.js:30 GET http://127.0.0.1/static/44588e3474a86cea5670.hot-update.json 404 (Not Found)webpack 配置中的 publicPath 必须是绝对地址，详细配置如下所示：
module.exports = {
// 其他配置信息略
// ……
output : {
path: configs.dist,
// 必须是绝对地址
publicPath: 'http://127.0.0.1/static/',
filename : '[name].bundle.js',
libraryTarget : 'var'
}
}处理 AJAX 跨域 Access-Control-Allow-Origin 错误
错误3：No ‘Access-Control-Allow-Origin' header
XMLHttpRequest cannot load http://127.0.0.1/static/df222441abc9ddb6a616.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
不可思议，在本地访问竟然会出现 AJAX 跨域问题，仔细检查后发现，浏览器把 localhost 与 127.0.0.1 当成了两个不同的域，解决的方法很多，只说最简单的一种，访问应用时，尽量采用与 webpack 配置中的 publicPath 完全一致的路径，如在本文中，最好的访问方法是输入 http://127.0.0.1/ 访问本地应用。
修正 OccurenceOrderPlugin 构造器错误
错误4：OccurenceOrderPlugin构造器错误
new webpack.optimize.OccurenceOrderPlugin(),
TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
at Object.<anonymous> (E:\Workspace\vue-hot\dev-server.js:23:6)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3此问题一般出现在 webpack 2 中，解决办法很简单，将 OccurenceOrderPlugin 改为 OccurrenceOrderPlugin 即可。
webpack 热加载方式总结
总结
webpack 编译程序有两种热加载方式，webpack-dev-server 与 webpack-hot-middleware 方式，从 webpack 2 的性能来看，webpack-dev-server 完全能够满足开发的需要，但最大的问题在于，webpack-dev-server 不能向外发布服务，只能在本地访问。
以上这篇基于 webpack-hot-middleware 热加载相关错误的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。