title: Webpack dev server compiling successfully but reload or rebuild not working
body: <p>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.
  <a href="https://i.stack.imgur.com/X5OTz.png" rel="nofollow noreferrer">terminal compiled successfully</a></p>
  <p>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.</p>
  <p>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.</p>
  <p>Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>// 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"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 = () =&gt; {
    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
      ]
    }
  }</code></pre>
  </div>
  </div>
  </p>