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]を実行しています。
誰もが同じ問題に遭遇し、解決策を見つけましたか?
ありがとうございました。