总结webpack-hot-middleware热加载相关错误的解决办法


这几天一直在折腾webpack-hot-middleware热加载的问题,其中也出现了很多问题,总算不断的通过百度、谷歌解决了,现在来总结下相关错误:

错误一:浏览器控制台中显示找不到__webpack_hmr

GET http://127.0.0.1:3450/__webpack_hmr 404 (Not Found)
在webpack的entry配置添加引用路径’webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true’,相关的参数最好不要省略,否则会出现无法自动刷新的问题。处理脚本如下:

var hotMiddlewareScript = ‘webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true’;
var devConfig = {
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
错误二:找不到hot-update.json

main.bundle.js:30 GET http://127.0.0.1:3450/static/44588e3474a86cea5670.hot-update.json 404 (Not Found)
webpack配置中的publicPath必须是绝对地址,详细配置如下所示:

module.exports = {
output : {
path: __dirname + ‘/src/build/’,// 打包后的文件存放的地方
filename: “[name].build.js”,// 打包后输出文件的文件名
publicPath: ‘http://127.0.0.1:3450/src/build/’ // 必须是绝对地址
}
}
错误三:No ‘Access-Control-Allow-Origin’ header

XMLHttpRequest cannot load http://127.0.0.1:3450/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:3450当成了两个不同的域,解决的方法很多,只说最简单的一种,访问应用时,尽量采用与webpack配置中的publicPath完全一致的路径,如在本文中,最好的访问方法是输入http://127.0.0.1/访问本地应用。

错误四: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中,目前这个插件注释掉也不会报错,暂时没有发现其他问题,具体可参考:http://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin

本文持续更新中,发现新问题会及时更新!