Javascript Webpack HMR未重新加载HTML文件
我有一个简单的HMR设置,用于重新加载typescript文件和postcss文件。它们工作得非常好,模块无需刷新页面即可重新加载。但当我更改HTML文件时,网站不会自行重新加载,HTML内容也不会自动重新加载 这是我的网页包配置文件:Javascript Webpack HMR未重新加载HTML文件,javascript,html,node.js,webpack,config,Javascript,Html,Node.js,Webpack,Config,我有一个简单的HMR设置,用于重新加载typescript文件和postcss文件。它们工作得非常好,模块无需刷新页面即可重新加载。但当我更改HTML文件时,网站不会自行重新加载,HTML内容也不会自动重新加载 这是我的网页包配置文件: const{resolve}=require('path'); const webpack=require('webpack'); const HtmlWebpackPlugin=require('html-webpack-plugin'); const Cl
const{resolve}=require('path');
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
条目:resolve(uu dirname,'src/main.ts'),
输出:{
路径:解析(_dirname,'dist'),
文件名:“bundle.js”,
},
模块:{
规则:[
{
测试:/\.ts$/,,
加载器:“很棒的类型脚本加载器”,
排除:/node_模块/,
},
{
测试:/\.css$/,,
排除:/node_模块/,
使用:[
{
加载器:“样式加载器”
},
{
加载器:“css加载器”,
选项:{
进口装载机:1,
},
},
{
加载器:“postss加载器”,
}
]
}
]
},
devtool:'源映射',
模式:"发展",,
插件:[
新HtmlWebpackPlugin({
模板:resolve(uu dirname,'./src/index.html'),
}),
新建webpack.HotModuleReplacementPlugin(),
新的CleanWebpackPlugin(解析(uu dirname,'dist'))
],
开发服务器:{
contentBase:resolve(uu dirname,'dist'),
港口:9000,
热:是的,
开放:是的,
进步:没错,
}
}
问题在于html网页包插件不会对更改做出反应,也不会触发hmr。
为了实现这一目标,您可以尝试以下方法:
const { resolve } = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
let devServer; // set below in devserver part
function reloadHtml() {
this.plugin('compilation',
thing => thing.plugin('html-webpack-plugin-after-emit', trigger));
const cache = {};
function trigger(data, callback) {
const orig = cache[data.outputName];
const html = data.html.source();
if (orig && orig !== html)
devServer.sockWrite(devServer.sockets, 'content-changed');
cache[data.outputName] = html;
callback();
}
}
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: [
reloadHtml,
new HtmlWebpackPlugin({
template: resolve(__dirname, './src/index.html'),
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(resolve(__dirname, 'dist'))
],
devServer: {
before(app, server) {
devServer = server;
},
contentBase: resolve(__dirname, 'dist'),
port: 9000,
hot: true,
open: true,
progress: true,
}
}
如果您得到:
DeprecationWarning:Tapable.plugin已弃用。改为在“.hooks”上使用新API
您可以将重载HTML更改为:
function reloadHtml() {
const cache = {}
const plugin = {name: 'CustomHtmlReloadPlugin'}
this.hooks.compilation.tap(plugin, compilation => {
compilation.hooks.htmlWebpackPluginAfterEmit.tap(plugin, data => {
const orig = cache[data.outputName]
const html = data.html.source()
if (orig && orig !== html) {
devServer.sockWrite(devServer.sockets, 'content-changed')
}
cache[data.outputName] = html
})
})
}
不确定是否是这种情况,但如果您只想在外部html/视图文件更改时扩展当前HMR配置以重新加载浏览器,则可以使用多行代码来完成 可能您已经有了它,因为webpack dev server在内部使用chokidar,但如果找不到,请首先使用npm或Thread安装它:
npm install chokidar --save
yarn add -D chokidar
然后在您的网页包配置中要求它:
const chokidar = require('chokidar');
然后在devServer配置中:
devServer: {
before(app, server) {
chokidar.watch([
'./src/views/**/*.html'
]).on('all', function() {
server.sockWrite(server.sockets, 'content-changed');
})
},
还请检查以获取更多选项
我把它和Webpack4一起使用。不知道它是否适用于早期版本
希望它能帮助您或其他寻找这种情况的人。不起作用,它只是刷新页面。这种(整页刷新)可以更简单地实现。