基于webpack-hot-middleware热加载相关错误的解决方法

错误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())

错误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' 
 }
}

错误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/访问本地应用。

错误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-dev-server与webpack-hot-middleware方式，从webpack 2的性能来看，webpack-dev-server完全能够满足开发的需要，但最大的问题在于，webpack-dev-server不能向外发布服务，只能在本地访问。

以上这篇基于webpack-hot-middleware热加载相关错误的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。