基於webpack-hot-middleware熱載入相關錯誤的解決方案，

基於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熱載入相關錯誤的解決方案就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。