Website content is not changed.

I’m having troubles to get it working with my webpack configuration. I’m sure that it’s a webpack issue. I’ve tried multiple configurations and webpack flags but nothing is working. Any idea? My webpack configuration is quite complex. I’m starting the webpack-dev-server by webpack-dev-server --hot command

/* eslint-disable no-console */
const webpack = require("webpack");
const path = require("path");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const platform = "main";
const appVersion = "dev";

module.exports = {
  mode: "development",
  output: {
    path: path.join(__dirname, "public/js"),
    //filename: 'index.js',
    publicPath: "/js/",
    chunkFilename: `${platform}-[name]-${appVersion}.bundle.js`,
  },
  devServer: {
    contentBase: "public/",
    historyApiFallback: true,
    disableHostCheck: true,
    publicPath: "/js/",
    hot: true,
  },
  entry: { main: `./src/app-${platform}.js` },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // exclude: /(node_modules|bower_components)/,
        include: [path.join(__dirname, "src")],
        use: [
          {
            loader: "babel-loader",
            options: {
              compact: true,
              presets: [
                [
                  "@babel/preset-env",
                  {
                    targets: {
                      browsers: ["last 2 versions", "ie >= 11"],
                    },
                    spec: true,
                    debug: false,
                    shippedProposals: true,
                  },
                ],
                "@babel/preset-react",
              ],
              plugins: [
                // Stage 0
                "@babel/plugin-proposal-function-bind",

                // Stage 1
                "@babel/plugin-proposal-export-default-from",
                "@babel/plugin-proposal-logical-assignment-operators",
                ["@babel/plugin-proposal-optional-chaining", { loose: false }],
                [
                  "@babel/plugin-proposal-pipeline-operator",
                  { proposal: "minimal" },
                ],
                [
                  "@babel/plugin-proposal-nullish-coalescing-operator",
                  { loose: false },
                ],
                "@babel/plugin-proposal-do-expressions",

                // Stage 2
                ["@babel/plugin-proposal-decorators", { legacy: true }],
                "@babel/plugin-proposal-function-sent",
                "@babel/plugin-proposal-export-namespace-from",
                "@babel/plugin-proposal-throw-expressions",

                ["@babel/plugin-proposal-class-properties", { loose: false }],
                "@babel/plugin-proposal-object-rest-spread",
                "@babel/plugin-transform-object-assign",
                "@babel/plugin-transform-for-of",
                "@babel/plugin-transform-instanceof",
                "@babel/plugin-transform-classes",
                "@babel/plugin-transform-computed-properties",
                "@babel/plugin-transform-destructuring",
                "@babel/plugin-transform-function-name",
                "@babel/plugin-transform-object-super",
                "@babel/plugin-transform-parameters",
                "@babel/plugin-transform-shorthand-properties",
                "@babel/plugin-transform-spread",
                "@babel/plugin-transform-sticky-regex",
                "@babel/plugin-transform-template-literals",
                "@babel/plugin-transform-unicode-regex",
                "@babel/plugin-proposal-optional-catch-binding",
                "babel-plugin-transform-merge-sibling-variables",

                "babel-plugin-transform-inline-consecutive-adds",
                "babel-plugin-transform-minify-booleans",
                "babel-plugin-transform-property-literals",
                require.resolve("react-refresh/babel"),
              ],
            },
          },
        ],
      },
      {
        test: /\.[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jp(e*)g|gif|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: "raw-loader",
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
    alias: {
      moment: "window.moment",
      jQuery: "window.jQuery",
      jquery: "window.jQuery",
      "aws-amplify": 'window["aws-amplify"]',
      firebase: 'window["firebase"]',
    },
  },
  externals: [
    {
      moment: "moment",
      jQuery: "jQuery",
      jquery: "jQuery",
      "aws-amplify": 'window["aws-amplify"]',
      firebase: 'window["firebase"]',
    },
  ],
  plugins: [
    new webpack.ProvidePlugin({
      // inject ES5 modules as global vars
      $: "jQuery",
      jQuery: "jQuery",
      "window.jQuery": "jQuery",
      jquery: "jQuery",
      "window.jquery": "jQuery",

      // In case you imported plugins individually, we must also require them here:
      Alert: "exports-loader?Alert!bootstrap/js/src/alert",
      Button: "exports-loader?Button!bootstrap/js/src/button",
      Carousel: "exports-loader?Carousel!bootstrap/js/src/carousel",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/src/dropdown",
      Modal: "exports-loader?Modal!bootstrap/js/src/modal",
      Popover: "exports-loader?Popover!bootstrap/js/src/popover",
      ScrollSpy: "exports-loader?ScrollSpy!bootstrap/js/src/scrollspy",
      Tab: "exports-loader?Tab!bootstrap/js/src/tab",
      Tooltip: "exports-loader?Tooltip!bootstrap/js/src/tooltip",
      Util: "exports-loader?Util!bootstrap/js/src/util",

      moment: "moment",
      "window.moment": "moment",
      "aws-amplify": "aws-amplify",
      'window["aws-amplify"]': "aws-amplify",
      'window["firebase"]': "firebase",
    }),
    new webpack.DefinePlugin({
      "process.env.SITE_NAME": JSON.stringify("example"),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "index.ejs",
      templateParameters: {
        ...
      },
    }),
  ],
};

[jansedlon]

Thanks a lot for your response! 😃 Really helped and I see that you have really deep understanding of webpack.

[pmmmwh]

Looks like it’s fixed 🥇 However I’m not sure what fixed it.

Happy that stuff worked for you - that’s one complex Webpack config.

The below are some of my thoughts on what might have impacted the behaviour:

1. Added filename: app-${platform}.js?v=${appVersion} to output

This should only be related to caching and would not have impacted HMR.

1. Changed contentBase in devServer to contentBase: path.join(__dirname, 'public')

This option only affects static files, so it is not likely it fixed the issue - however it is always recommended to use an absolute path (since it is more deterministic for Webpack).

1. Removed disableHostCheck

This is pure security - enabling host check helps prevent DNS rebinding attacks.

1. Added CopyPlugin to copy some additional files new CopyPlugin({ patterns: [{ from: "prefetch-scripts", to: "./" }], }),

Kinda same as (2) - this seems like you have some files that have to be copied over to initialize the app?

1. Added filename: "../index.html" to HtmlWebpackPlugin

This definitely might have an impact since it alters the directory structure of how JS files are served from the generated HTML file. For instance, it might have been localhost:3000/js/index.html and localhost:3000/js/app.js but then HMR files are routed into / or any subdirectories within js, yielding a failed HMR update. You can debug the behaviour by setting writeToDisk: true in devServer.

In addition to these changes, you might also want to remove webpack.HotModuleReplacementPlugin since you already use hot: true and that tells WDS to inject the plugin for you (if not found).