Webpack-dev-server stops updating after first file change - reactjs

Question

Due to some update, my previously working set up no longer operates as expected. When I run yarn start WDS will look for changes to my files and make the right updates the first time, but any other changes to the file will not be send to the browser, even though WDS acknolodges the file change. Here is my current config
const path = require('path');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
require('babel-polyfill');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '/Zeus/src'),
build: path.join(__dirname, '/Zeus/dist'),
};
const common = {
entry: {
index: [
'babel-polyfill',
PATHS.app,
],
},
resolve: {
extensions: ['.js', '.jsx', '.scss'],
},
output: {
path: PATHS.build,
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[id].[chunkhash].js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
include: PATHS.app,
use: {
loader: 'babel-loader',
},
},
{
test: /flickity/,
loader: 'imports-loader?define=>false&this=>window',
}
],
},
plugins: [
new WebpackChunkHash({algorithm: 'md5'}) // 'md5' is default value
],
};
const extractSass = new ExtractTextPlugin({
filename: '[name].css',
disable: process.env.NODE_ENV === 'development',
});
//
// Developmemt configuration
//
if (TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: path.join(__dirname, '/Zeus'),
historyApiFallback: true,
hot: true,
// hotOnly: true,
clientLogLevel: 'info',
// stats: 'errors-only',
host: '0.0.0.0',
port: 8080,
},
module: {
rules: [{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
// use style-loader in development
fallback: 'style-loader',
}),
}],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
extractSass,
],
});
}
Usually this means I will cancel the process and start it again. Which works, but obviously not very convenient.
[edit]
To include my dir structure, it follows:
/
webpack.config.js
/Zeus
/dist
/src
index.js
I'm using webpack: ^4.29.6.
[edit to include pck file]
{
"name": "zeus",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --progress",
"start": "webpack-dev-server --debug",
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.0.0",
"#babel/preset-stage-1": "^7.0.0",
"#babel/preset-stage-3": "^7.0.0",
"#babel/register": "^7.0.0",
"autoprefixer-loader": "^3.2.0",
"axios-mock-adapter": "^1.16.0",
"babel-eslint": "10",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"chai": "^4.2.0",
"chai-jquery": "^2.1.0",
"css-loader": "^2.1.0",
"enhanced-resolve": "^4.1.0",
"enzyme": "^3.9.0",
"es6-promise-promise": "^1.0.0",
"eslint": "5.x",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"imports-loader": "^0.8.0",
"install": "^0.12.2",
"istanbul": "1.0.0-alpha.2",
"jquery": "^3.3.1",
"jsdom": "^14.0.0",
"mocha": "^6.0.2",
"mock-local-storage": "^1.1.8",
"nock": "^10.0.6",
"node-sass": "^4.11.0",
"offline-plugin": "^5.0.6",
"phantomjs": "^2.1.7",
"plato": "^1.7.0",
"react-addons-test-utils": "^15.6.2",
"redux-mock-store": "^1.5.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"tapable": "^1.1.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "^1.1.2",
"watchpack": "^1.6.0",
"webpack": "^4.29.6",
"webpack-chunk-hash": "^0.6.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"webpack-sources": "^1.3.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.3.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "^7.2.0",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/plugin-transform-runtime": "^7.3.4",
"axios": "^0.18.0",
"babel-preset-stage-1": "^6.24.1",
"enzyme-adapter-react-16": "^1.10.0",
"es6-promise": "^4.2.6",
"flickity": "^2.2.0",
"history": "^4.7.2",
"isomorphic-fetch": "^2.2.1",
"jest": "^24.3.1",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"moxios": "^0.4.0",
"npm-check-updates": "^3.1.7",
"prop-types": "^15.7.2",
"query-string": "^6.2.0",
"react": "^16.8.3",
"react-async-script": "^1.0.0",
"react-async-script-loader": "^0.3.0",
"react-autocomplete": "^1.8.1",
"react-dom": "^16.8.3",
"react-ga": "^2.5.7",
"react-google-login": "^5.0.2",
"react-infinite-scroller": "^1.2.4",
"react-loadable": "^5.5.0",
"react-masonry-component": "^6.2.1",
"react-modal": "^3.8.1",
"react-redux": "^7.0.1",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-router-scroll": "^0.4.4",
"react-sticky": "^6.0.3",
"react-waypoint": "^9.0.0",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-promise": "^0.6.0",
"redux-saga": "^1.0.2",
"redux-storage": "^4.1.2",
"redux-thunk": "^2.3.0"
}
}