錯誤1：找不到__webpack_hmr
成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗(yàn)。創(chuàng)新互聯(lián)多年互聯(lián)網(wǎng)經(jīng)驗(yàn)，見的多，溝通容易、能幫助客戶提出的運(yùn)營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。
GET http://127.0.0.1/__webpack_hmr 404 (Not Found)
在webpack的entry配置添加引用路徑'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true'，相關(guān)的參數(shù)最好不要省略，否則會出現(xiàn)無法自動刷新的問題。
處理腳本如下：
重慶分公司
重慶分公司
// 準(zhǔn)備webpack配置信息
let hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true',
wpConfig = require('./webpack.config'),
// 準(zhǔn)備修改配置信息
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必須是絕對地址，詳細(xì)配置如下所示：
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.
不可思議，在本地訪問竟然會出現(xiàn)AJAX跨域問題，仔細(xì)檢查后發(fā)現(xiàn)，瀏覽器把localhost與127.0.0.1當(dāng)成了兩個不同的域，解決的方法很多，只說最簡單的一種，訪問應(yīng)用時，盡量采用與webpack配置中的publicPath完全一致的路徑，如在本文中，最好的訪問方法是輸入http://127.0.0.1/訪問本地應(yīng)用。
錯誤4：OccurenceOrderPlugin構(gòu)造器錯誤
new webpack.optimize.OccurenceOrderPlugin(), TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor at Object.(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
此問題一般出現(xiàn)在webpack 2中，解決辦法很簡單，將OccurenceOrderPlugin改為OccurrenceOrderPlugin即可。
總結(jié)
webpack編譯程序有兩種熱加載方式，webpack-dev-server與webpack-hot-middleware方式，從webpack 2的性能來看，webpack-dev-server完全能夠滿足開發(fā)的需要，但最大的問題在于，webpack-dev-server不能向外發(fā)布服務(wù)，只能在本地訪問。
以上這篇基于webpack-hot-middleware熱加載相關(guān)錯誤的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。
