javascript - Webpack HMR 不重新加载 HTML 文件
问题描述
我有一个简单的 HMR 设置,用于重新加载打字稿文件和 postcss 文件。它们运行良好,模块无需刷新页面即可重新加载。但是当我更改我的 HTML 文件时,网站不会自行重新加载,并且 HTML 内容不会被热重新加载。
这是我的 webpack 配置文件:
const { resolve } = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: resolve(__dirname, 'src/main.ts'),
output: {
path: resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
}
]
}
]
},
devtool: 'source-map',
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, './src/index.html'),
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(resolve(__dirname, 'dist'))
],
devServer: {
contentBase: resolve(__dirname, 'dist'),
port: 9000,
hot: true,
open: true,
progress: true,
}
}
解决方案
不确定是否是这种情况,但如果您只想扩展当前的 HMR 配置以在外部 html/view 文件更改时重新加载浏览器,那么您可以使用chokidar增加几行代码。
也许你已经有了它,因为 webpack-dev-server 在内部使用了 chokidar,但是如果没有找到,那么先用 npm 或 yarn 安装它:
npm install chokidar --save
yarn add -D chokidar
然后在你的 webpack 配置中要求它:
const chokidar = require('chokidar');
然后在您的 devServer 配置中:
devServer: {
before(app, server) {
chokidar.watch([
'./src/views/**/*.html'
]).on('all', function() {
server.sockWrite(server.sockets, 'content-changed');
})
},
还要检查API以获取更多选项。
我将它与 Webpack4 一起使用。不知道它是否适用于早期版本...
希望它可以帮助您或其他寻找这种情况的人。
推荐阅读
- c# - DateTime 导致应用程序在物理手机上崩溃?
- python-3.x - 为什么 PyObject_CallMethod 有时会导致访问冲突?
- java - 如何解决错误?“服务器无法识别 HTTP 标头 SOAPAction 的值”
- asp.net-core - 有没有办法更改用于使用 JwtSecurityTokenHandler 设置 IssuedAt/ValidFrom/ValidTo 的声明?
- java - 通过 JTextField 循环到 getText 并检查是否为空
- rust - 如何使用 git2-rs Rust crate 在 git repo 中获取特定文件的 git 日志?
- scala - 在 Scala 中模拟 Kafka 消费者
- javascript - 如何验证用户名输入表单 JavaScript
- javascript - 如何在 TypeScript 中使用第 3 阶段的功能?
- java - 构建自定义 SnakeYAML 构造函数以模块化方式反序列化 yaml 文件