[英]webpack-dev-server refuses to hot-reload html file
使用webpack-dev-server
时,当我对 javascript 文件进行更改时,更改会立即反映在网页上。
但是,当我对 HTML 文件进行更改时,网站并没有反映出来。 为了看到新的 html 页面,我必须先运行webpack --mode production
,然后,如果我重新运行webpack-dev-server --hot --mode development
,我可以看到新的 HTML 变化。
这很烦人,我希望像 javascript 代码一样热重载我的 html 更改。 有没有我想念的把戏? 我花了一整天的时间在谷歌上搜索和玩选项。 唯一有帮助的是添加
devServer:
...
devMiddleware: {
writeToDisk: true
},
根据这个答案到我的webpack.config.js
。 但是,这有以下问题:每次发生热重载时,我的 output dist/
文件夹都会被带有校验和名称的.js
文件堵塞,这也很烦人。
我的项目树:
完整的webpack.config.js
:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/index.ts',
watch: true,
module: {
rules: [
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
plugins: [
new HtmlWebpackPlugin({
title: "My app",
template: "./src/index.html",
/* This output directory is relative to the **OUTPUT** 'publicPath'!
So, if you were to write "./dist/index.html" below, it would output it in "./dist/dist/index.html"!
(You can verify this by running `npx webpack --watch` and looking what files it touches/generates.)
*/
filename: "index.html",
inject: "body"
})
],
devServer: {
// devMiddleware: { writeToDisk: true },
static: {
directory: path.join(__dirname, "dist"),
watch: true
},
compress: true,
webSocketServer: 'ws',
host: '0.0.0.0',
port: 10000,
/* Ensure I can access the server directly, without incurring the 'invalid host header' error */
allowedHosts: "all",
/* So that the webpack-dev-server reloads when I change the index.html file, even though it isn't explicitly listed anywhere. */
watchFiles: ['src/**/*'],
open: true,
hot: true,
},
};
没关系,我发现了问题:
不幸的是,Stackoverflow 不支持行号,但如果您查看我原来问题中的webpack.config.js
代码,您会发现以下代码:
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
publicPath
参数似乎是导致问题的原因。 删除它使热重载“魔法”自动检测到我已经更改了 HTML 文件,并重新部署它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.