I'm running webpack with the --watch command to compile my browser code with the webpack.HotModuleReplacementPlugin. It seems that it keeps looking for a http://localhost/3df194f7935a8d2781e4.hot-update.json which doesn't get generated until the next update occurs. Here's the flow:
Start the server using
webpack --watchThis generates the following console outputwebpack 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] iconsMy dist folder contains the following:
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.mapLoad the webpage in the browser checking the network logs This is where it attempts to access
GET http://localhost/3df194f7935a8d2781e4.hot-update.jsonwhich is the hashcode from the previous build, however you can see it's not in the dist outputMake a modification to the browser code to trigger a HMR update. This generates the next output:
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] iconsMy dist folder contains the following:
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.mapSo my dist ouput now contains the hot-update it was looking for 2 steps ago, but doesn't contain the current hot-update.json that the website will now be looking for.
So the basic question here is how do I get my webpack watch to output the hot-update.json file for the current build, not the previous build?
Here's a copy of what the webpack config looks like
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',
],
},
],
},
};