我正在使用 --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日志修改浏览器代码以触发 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 watch 输出当前构建的 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',
],
},
],
},
};