I'm just setting up a new MVC project using .NET Core 2.1. I've configured Webpack for TypeScript/SASS compilation etc along with HMR (Hot Module Reload).
When setting all of this up I just had a simple HomeController with a single Index view and all was working correctly. I've now just added the scaffolded .NET Identity pages which get added to a new 'Identity' area in the project.
Here's my project structure:
The problem is that HMR seems to be broken within this area. I get the following console error when running the project:
:58109/Identity/Account/dist/__webpack_hmr:1 Failed to load resource: the server responded with a status of 404 (Not Found)
At first I thought this looked wrong but then I checked URL it's using on the Home/Index page (where HMR is working) and that was:
..so I'm not really sure what's going on or what the URL should be.
I found this GitHub issue which suggests adding HotModuleReplacementEndpoint = "/dist/__webpack_hmr" to the WebpackDevMiddlewareOptions in my Startup.cs. I have tried this and it did not help.
I have the following in my Startup.cs, as required:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
//HotModuleReplacementEndpoint = "/dist/__webpack_hmr"
});
}
and my webpack.config.js looks like this:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const dirName = 'wwwroot/dist';
const devMode = process.env.NODE_ENV !== "production";
console.log('env:' + process.env.NODE_ENV);
module.exports = {
mode: devMode ? 'development' : 'production',
entry: { main: './wwwroot/js/app.ts' },
output: {
path: path.resolve(__dirname, dirName),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: require.resolve('jquery'),
loader: 'expose-loader?$!expose-loader?jQuery'
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node-modules/
},
{
test: /\.s[c|a]ss$/,
use: [
'css-hot-loader',
//'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
ctx: {
env: devMode ? 'development' : 'production'
}
}
}
},
'resolve-url-loader',
'sass-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
publicPath: 'images'
}
}
]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new CleanWebpackPlugin(dirName, {}),
new MiniCssExtractPlugin({
filename: "bundle.css",
chunkFilename: "bundle.css"
})
]
};
Any help would be greatly appreciated!
