Webpack熱模塊更換始終使用PHP內置服務器進行整頁重裝

我正在嘗試爲我的CSS使用Webpack熱模塊替換。Webpack熱模塊更換始終使用PHP內置服務器進行整頁重裝

我運行內置的服務器（php -S localhost:8000 -t .）的PHP加載以下index.php文件，這是在我的項目的根目錄：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Test webpack</title> 
    </head> 
    <body> 
    <h1>Hello world</h1> 

    <script src="http://localhost:8080/app.js"></script> 
    </body> 
</html>

然後我想用webpack-dev-server及其熱模塊更換功能每次我保存我的CSS文件時查看我的CSS更改。

這裏是我的webpack.config.js：

const path = require("path"); 

module.exports = { 
    entry: { 
    app: "./src/app.js" 
    }, 
    output: { 
    path: path.join(__dirname, "assets"), 
    filename: "[name].js" 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: [ 
      { 
      loader: "style-loader" 
      }, 
      { 
      loader: "css-loader" 
      } 
     ] 
     } 
    ] 
    } 
};

這是我./src/app.js：

import "./app.css";

這是我./src/app.css：

body { 
    background-color: #fff; 
}

我開始通過鍵入webpack-dev-server：./node_modules/.bin/webpack-dev-server --hot。

問題是，而不是熱重新加載CSS，它總是做一個完整的頁面重新加載。

這裏是在我布勞爾的控制檯打印：

Navigated to http://localhost:8000/ 
[HMR] Waiting for update signal from WDS... 
[WDS] Hot Module Replacement enabled. 
[WDS] App updated. Recompiling... 
[WDS] App hot update... 
[HMR] Checking for updates on the server... 
GET http://localhost:8000/8f2d15bbf1ed4e8f7e63.hot-update.json 404 (Not Found) 
[HMR] Cannot find update. Need to do a full reload! 
[HMR] (Probably because of restarting the webpack-dev-server)

在這些日誌，問題是，它會更新信息上localhost:8000/8f2d15bbf1ed4e8f7e63.hot-update.json，這顯然是沒有發現，因爲這是我的PHP服務器（8000港口）。但我不知道爲什麼webpack-dev-server試圖達到localhost:8000，因爲它默認運行在localhost:8080，我沒有覆蓋任何東西。

我正在運行[email protected]和[email protected]。

有沒有人遇到同樣的問題，並找到了解決辦法？

謝謝。

來源

2017-08-17 Cyrille

我正在使用由vue-cli（官方腳手架工具vue.js）（this template specifically）生成的腳本，並且遇到了此問題。不知怎的，

"webpack": "^3.6.0", 
"webpack-dev-middleware": "^1.12.0", 
"webpack-hot-middleware": "^2.18.2",

少了點全重載所有的時間，當我將其更改爲我在另一個工作項目

"webpack": "^2.6.1", 
"webpack-dev-middleware": "^1.10.0", 
"webpack-hot-middleware": "^2.18.2",

熱重裝是蠻好用的。

在dev-server.js相關部件：

var hotMiddleware = require('webpack-hot-middleware')(compiler, { 
    log: false, 
    heartbeat: 2000 
}) 
// force page reload when html-webpack-plugin template changes 
compiler.plugin('compilation', function (compilation) { 
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 
    hotMiddleware.publish({ action: 'reload' }) 
    cb() 
    }) 
}) 
// enable hot-reload and state-preserving 
// compilation error display 
app.use(hotMiddleware)

在dev-client.js：

/* eslint-disable */ 
require('eventsource-polyfill') 
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 

hotClient.subscribe(function (event) { 
    if (event.action === 'reload') { 
    window.location.reload() 
    } 
})

來源

2018-01-04 07:34:17

Webpack熱模塊更換始終使用PHP內置服務器進行整頁重裝

回答

相關問題