基于webpack-hot-middleware熱加載相關(guān)錯(cuò)誤的解決方法

發(fā)布時(shí)間：2020-09-20 09:08:39 來(lái)源：腳本之家閱讀：456 作者：蟻方陣欄目：web開(kāi)發(fā)

錯(cuò)誤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'，相關(guān)的參數(shù)最好不要省略，否則會(huì)出現(xiàn)無(wú)法自動(dòng)刷新的問(wè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())

錯(cuò)誤2：找不到hot-update.json

main.bundle.js:30 GET http://127.0.0.1/static/44588e3474a86cea5670.hot-update.json 404 (Not Found)

webpack配置中的publicPath必須是絕對(duì)地址，詳細(xì)配置如下所示：

module.exports = {
 // 其他配置信息略
 // ……
 output : {
 path: configs.dist,
 // 必須是絕對(duì)地址
 publicPath: 'http://127.0.0.1/static/',
 filename : '[name].bundle.js',
 libraryTarget : 'var' 
 }
}

錯(cuò)誤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.

不可思議，在本地訪問(wèn)竟然會(huì)出現(xiàn)AJAX跨域問(wèn)題，仔細(xì)檢查后發(fā)現(xiàn)，瀏覽器把localhost與127.0.0.1當(dāng)成了兩個(gè)不同的域，解決的方法很多，只說(shuō)最簡(jiǎn)單的一種，訪問(wèn)應(yīng)用時(shí)，盡量采用與webpack配置中的publicPath完全一致的路徑，如在本文中，最好的訪問(wèn)方法是輸入http://127.0.0.1/訪問(wèn)本地應(yīng)用。

錯(cuò)誤4：OccurenceOrderPlugin構(gòu)造器錯(cuò)誤

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

此問(wèn)題一般出現(xiàn)在webpack 2中，解決辦法很簡(jiǎn)單，將OccurenceOrderPlugin改為OccurrenceOrderPlugin即可。

總結(jié)

webpack編譯程序有兩種熱加載方式，webpack-dev-server與webpack-hot-middleware方式，從webpack 2的性能來(lái)看，webpack-dev-server完全能夠滿足開(kāi)發(fā)的需要，但最大的問(wèn)題在于，webpack-dev-server不能向外發(fā)布服務(wù)，只能在本地訪問(wèn)。

以上這篇基于webpack-hot-middleware熱加載相關(guān)錯(cuò)誤的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

基于webpack-hot-middleware熱加載相關(guān)錯(cuò)誤的解決方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽