HotModuleReplacement not connecting - asp.net-core

Question

I am currently trying to use webpack for the first time in a project and have set up a ASP.NET Core project with the following in the Startup.cs file
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
I have Styles folder which contains some .less files too and I have a webpack.config.js in the root of the project, containing:
const path = require("path");
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env) => {
return [{
mode: 'development', //TODO Make configurable
entry: { 'main': './app.js' },
output: {
path: path.resolve(__dirname, "wwwroot"),
filename: "js/[name].js",
publicPath: "/"
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
module: {
rules: [
{
test: /\.(less)$/,
include: [
path.resolve(__dirname, "Styles")
],
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
}
}];
}
When I run my application, I can see in the output that it is compiling the webpack bundles and I see my files in the js and css folder of wwwroot, which suggests it is finding the webpack config file, I also see lines like below which suggests it is attempting something with the webpack-hot-middleware plugin:
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/querystring-es3/decode.js] 2.45 KiB {main} [built]
[./node_modules/querystring-es3/encode.js] 2.48 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {main} [built]
[./node_modules/webpack-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 7.68 KiB {main} [built]
but then I don't see any other reference to HMR, and I don't get the [HMR] connected line in the console to signify it has linked up.
Is there anything I am missing in this setup?

Answer 1

I found the problem.....I was being stupid and had forgotten to actually include the is file that is output by webpack, because all I was using for at that point was to compile my less files into CSS!