2017-08-17 10 views
0

Webpackホットモジュール交換をCSSに使用しようとしています。Webpackホットモジュール交換PHP内蔵サーバーで常にフルページリロードを行う

私は私のプロジェクトのルートにある以下のindex.phpファイル、ロードするために(php -S localhost:8000 -t .)PHPがビルトインサーバーを実行します。その後、私はwebpack-dev-serverとそのホットモジュールの交換機能を使用したい

<!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> 

を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) 

これらのログの後、問題が8000(それは私のPHPサーバであるので、明らかに見つからないされ、それがlocalhost:8000/8f2d15bbf1ed4e8f7e63.hot-update.jsonに更新情報を検索することですポート)。しかし、webpack-dev-serverがデフォルトでlocalhost:8080で実行されているため、localhost:8000にアクセスしようとしている理由が分かりません。何も上書きしませんでした。

私は[email protected][email protected]を実行しています。

誰もが同じ問題に遭遇し、解決策を見つけましたか?

ありがとうございました。

答えて

0

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() 
    } 
}) 
関連する問題