我正在使用--watch命令运行webpack，以使用webpack.HotModuleReplacementPlugin编译我的浏览器代码。似乎它一直在寻找http：//localhost/3df194f7935a8d2781e4.hot-update.json，直到下一次更新发生时，它才会生成。流程如下：
-
使用
webpack --watch启动服务器 这将生成以下控制台输出webpack is watching the files… Hash: 3df194f7935a8d2781e4 Version: webpack 4.43.0 Child Hash: 3df194f7935a8d2781e4 Time: 7198ms Built at: 07/18/2020 3:07:15 PM Asset Size Chunks Chunk Names app.3df194f7935a8d2781e4.js 617 KiB app [emitted] [immutable] app app.3df194f7935a8d2781e4.js.map 539 KiB app [emitted] [dev] app app.css 490 KiB app [emitted] app app.css.map 514 KiB app [emitted] [dev] app index.html 430 bytes [emitted] react.3df194f7935a8d2781e4.js 906 KiB react [emitted] [immutable] react react.3df194f7935a8d2781e4.js.map 1.03 MiB react [emitted] [dev] react icons.3df194f7935a8d2781e4.js 510 KiB icons [emitted] [immutable] icons icons.3df194f7935a8d2781e4.js.map 520 KiB icons [emitted] [dev] icons我的dist文件夹包含以下内容：
app.3df194f7935a8d2781e4.js app.3df194f7935a8d2781e4.js.map app.css app.css.map index.html react.3df194f7935a8d2781e4.js react.3df194f7935a8d2781e4.js.map icons.3df194f7935a8d2781e4.js icons.3df194f7935a8d2781e4.js.map -
在浏览器中加载网页，检查网络日志 这是它尝试访问
GET http://localhost/3df194f7935a8d2781e4.hot-update.json的地方，它是先前构建的哈希码，但是您可以看到它不在dist输出中 -
对浏览器代码进行修改以触发HMR更新。生成下一个输出：
Hash: e758918f37c9e4eaa07f Version: webpack 4.43.0 Child Hash: e758918f37c9e4eaa07f Time: 2112ms Built at: 07/18/2020 3:14:27 PM Asset Size Chunks Chunk Names 3df194f7935a8d2781e4.hot-update.json 45 bytes [emitted] [immutable] [hmr] app.3df194f7935a8d2781e4.hot-update.js 3.8 KiB app [emitted] [immutable] [hmr] app app.3df194f7935a8d2781e4.hot-update.js.map 1.38 KiB app [emitted] [dev] app app.css 490 KiB app [emitted] app app.css.map 514 KiB app [emitted] [dev] app app.e758918f37c9e4eaa07f.js 617 KiB app [emitted] [immutable] app app.e758918f37c9e4eaa07f.js.map 539 KiB app [emitted] [dev] app index.html 430 bytes [emitted] react.e758918f37c9e4eaa07f.js 906 KiB react [emitted] [immutable] react react.e758918f37c9e4eaa07f.js.map 1.03 MiB react [emitted] [dev] react icons.e758918f37c9e4eaa07f.js 510 KiB icons [emitted] [immutable] icons icons.e758918f37c9e4eaa07f.js.map 520 KiB icons [emitted] [dev] icons我的dist文件夹包含以下内容：
3df194f7935a8d2781e4.hot-update.json app.3df194f7935a8d2781e4.hot-update.js app.3df194f7935a8d2781e4.hot-update.js.map app.3df194f7935a8d2781e4.js app.3df194f7935a8d2781e4.js.map app.css app.css.map app.e758918f37c9e4eaa07f.js app.e758918f37c9e4eaa07f.js.map index.html react.3df194f7935a8d2781e4.js react.3df194f7935a8d2781e4.js.map react.e758918f37c9e4eaa07f.js react.e758918f37c9e4eaa07f.js.map icons.3df194f7935a8d2781e4.js icons.3df194f7935a8d2781e4.js.map icons.e758918f37c9e4eaa07f.js icons.e758918f37c9e4eaa07f.js.map因此，我的dist输出现在包含了2步之前要查找的热更新，但不包含网站现在正在查找的当前hot-update.json。
所以这里的基本问题是如何让我的webpack手表为当前版本而不是先前版本输出hot-update.json文件？
这是webpack配置的副本
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import * as webpack from 'webpack';
let extensions = ['.ts','.tsx','.js','.json','.html','.mjs'];
export const clientConfig: webpack.Configuration = {
entry: {
app: [
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000','./src/browser/app.tsx',],},target: 'web',externals: {},optimization: {
splitChunks: {
cacheGroups: {
react: {
chunks: 'all',name: 'react',test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,icons: {
chunks: 'all',name: 'icons',test: /[\\/]node_modules[\\/](@someone[\\/]icons)[\\/]/,output: {
chunkFilename: '[name].[hash].js',filename: '[name].[hash].js',path: __dirname + '/dist/browser',publicPath: `/`,resolve: {
extensions,devtool: 'source-map',mode: 'development',plugins: [
new MiniCssExtractPlugin(),new HtmlWebpackPlugin({
chunks: ['app'],filename: 'index.html',template: 'src/browser/app.html',title: 'scaffold-typescript-website--express-react',}),new webpack.HotModuleReplacementPlugin({}),module: {
rules: [
{
test: /\.svg$/,use: [{ loader: require.resolve('react-svg-loader') }],// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,use: {
loader: 'ts-loader',options: {
configFile: 'tsconfig.dev.json',// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: 'pre',loader: 'source-map-loader',test: /\.js$/ },{
test: /\.(sa|sc|c)ss$/,use: [
{
loader: MiniCssExtractPlugin.loader,options: {
hmr: process.env.NODE_ENV === 'development','css-loader',{
loader: 'postcss-loader',options: {
config: {
ctx: {
minify: true,// To use this npm install --save-dev sass-loader node-sass
// 'sass-loader',};