Update 2!: After looking around I found this thread which helped solve the HMR issue:
https://github.com/webpack-contrib/webpack-hot-middleware/issues/390
but my original question regarding nodemon still stands.
Update: I ran the server with just node instead of nodemon and it seems to have stopped the constant rebuilding, however I do not have any hot reloading functionality and have to refresh the app page to view changes. I will be investigating this issue but in the meantime any help would be great.
Original post: I am very new to webpack and have limited experience with nodemon. I have set up webpack-dev-middleware and webpack-hot-middleware in my Express server as follows:
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackConfig = require('../../webpack.config');
const compiler = webpack(webpackConfig);
const app = express();
const PORT = 8080;
app.use('/', express.static(path.resolve(__dirname, '../../dist')));
app.use(express.json());
// webpack middleware for hot reloading
app.use(require("webpack-dev-middleware")(compiler, {
publicPath: webpackConfig.output.publicPath,
writeToDisk: true,
}));
app.use(require("webpack-hot-middleware")(compiler));
and my webpack.config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: [path.resolve(__dirname, 'src', 'index.js'),
'webpack-hot-middleware/client'],
mode: "development",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/bundle'
},
devServer: {
static: {
publicPath: '/',
directory: path.resolve(__dirname)
},
port: 8080,
open: true,
},
module: {
rules: [
{
test: /.(jsx|js)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
"targets": "defaults"
}],
'@babel/preset-react'
]
}
}]
},
{
test: /.(css|scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
template: 'index.html'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
My issue is that without writeToDisk set to true in the webpack-dev-middleware options, webpack does not actually save the new build to my dist folder; but when writeToDisk IS set to true, it appears that webpack is constantly rebuilding bundle.js without any changes actually being made to any files, and therefore triggering nodemon to restart the server.
Any help on this matter is much appreciated; this is my very first stackoverflow post so please let me know how I can improve my question.