webpack-hot-reloading.js

const devServer = {};
const webpack = require("webpack");

const ENV = process.env.NODE_ENV === "production" ? "production" : "development";

const outputPath =
  ENV === "production"
    ? path.resolve(__dirname + "../../static/")
    : path.resolve(__dirname + "/dist/");

const plugins = [];
const devtool = ENV === "production" ? false : "inline-source-map";
const entry = ["whatwg-fetch", __dirname + "/src/js/app.js"];
const watch = ENV === "production";
const filename = ENV === "production" ? "[name].[chunkhash].js" : "bundle.js";
const publicPath = ENV === "production"
        ? "/wp-content/themes/my-theme/static/"
        : "http://localhost:8080/"

if (ENV !== "production") {
  plugins.push(new webpack.HotModuleReplacementPlugin());
  entry.push("webpack/hot/dev-server");
  devServer = {
    contentBase: "./dist",
    hot: true,
    publicPath: "http://localhost:8080/",
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "POST, GET, PUT, DELETE, OPTIONS"
    }
  };
}

module.exports = {
  mode: ENV,

  entry: entry,

  output: {
    // options related to how webpack emits results
    path: outputPath,
    // output path for the bundle, set on top depending on the environment
    filename: filename,
    // the filename template for entry chunks, set on top depending on the environment
    chunkFilename: "[name]-[chunkhash].js",
    publicPath: publicPath
  },

  watch: watch,

  target: "web",
  
  devtool: devtool
  ...
}