Webpack dev server compiling successfully but reload or rebuild not working

Question

I'm having problems with the webpack dev server, when running the script npm run frontend (during development) to see changes in the browser, it shows it successfully compiles. terminal compiled successfully

However, the automatic build and browser reload don't work, the only way I can see the changes I made in the browser is by running npm run build every time I save.

I can't get my head around the solution. From what I understand, the issue is that when I run the script, webpack is still thinking that I'm in production mode and not in development. Other idea is that webpack gets stuck and is unable to clear the memory with the new bundle file in memory. Below are my webpack.config.js and package.json files.

Thanks!

// package.json
{
  "name": "building-an-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "backend": "nodemon backend/server.js",
    "seed": "node backend/seed.js",
    "frontend": "webpack-dev-server --mode=development --env.NODE_ENV=local",
    "serve:frontend": "concurrently webpack-dev-server",
    "build": "webpack -p --mode=production --env.NODE_ENV=production",
    "mongo": "mongod --dbpath ~/data/db",
    "start": "node backend/server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.0.5",
    "bulma": "^0.9.1",
    "concurrently": "^6.0.0",
    "css-loader": "^3.5.3",
    "dotenv-webpack": "^4.0.0",
    "html-webpack-plugin": "^4.3.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0",
    "webserver": "^4.0.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.12",
    "axios": "^0.21.0",
    "bcrypt": "^5.0.0",
    "body-parser": "^1.19.0",
    "buefy": "^0.9.4",
    "bulma-calendar": "^6.0.2",
    "cloudinary-core": "^2.11.3",
    "cloudinary-react": "^1.6.8",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.10.11",
    "mongoose-hidden": "^1.9.0",
    "mongoose-unique-validator": "^2.0.3",
    "react": "^16.13.1",
    "react-datepicker": "^3.3.0",
    "react-dom": "^16.13.1",
    "react-geocode": "^0.2.2",
    "react-map-gl": "^5.2.10",
    "react-rater": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "react-select": "^3.1.0",
    "use-position": "0.0.8"
  }
}

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const DotEnv = require('dotenv-webpack')
const env =
  process.env.NODE_ENV === 'production'
    ? new webpack.EnvironmentPlugin({ ...process.env })
    : new DotEnv()

module.exports = () => {
  return {
    entry: './frontend/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve('./backend/dist'),
      publicPath: '/'
    },
    // target: 'web',
    devtool: 'source-map',
    module: {
      rules: [
        { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        {
          test: /\.s(a|c)ss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        { test: /\.(png|jpe?g|gif)$/i, use: 'file-loader' }
      ]
    },
    devServer: {
      contentBase: path.resolve('frontend'),
      hot: true,
      open: true,
      port: 8000,
      watchContentBase: true,
      historyApiFallback: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8000',
          secure: false
        }
      }
    },
    plugins: [
      new DotEnv(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.ProvidePlugin({
        React: 'react'
      }),
      new HtmlWebpackPlugin({
        template: 'frontend/index.html',
        filename: 'index.html',
        inject: 'body'
      }),
      env
    ]
  }
}

Answer 1

You need to run it in watch mode. Try adding --watch in your package.json like "frontend": "webpack-dev-server --mode=development --watch --env.NODE_ENV=local". It should work.

Answer 2

I've found the solution, by comparing my code from before the deployment to Heroku.

I remembered that while I was developing the application, the API was using a proxy to http://localhost:8000, therefore the devserver needed a different port 8001.

Now the automatic build and browser reload work when I save changes in my app during development.

devServer: {
      contentBase: path.resolve('frontend'),
      hot: true,
      open: true,
      port: 8001,
      watchContentBase: true,
      historyApiFallback: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8000',
          secure: false
        }
      }
    },