Webpack/Javascript - Browser keeps refreshing when I do "npm run build-dev"-CodePudding

I am trying to get more familiar with using webpack. I have converted everything to be able to load modules, and plugins. Everything loads fine when I run "npm run build-prod", when I use liveServer, HTML and everything loads properly. However when I run "npm run build-dev", it auto pops up my index.html file and starts reloading the page nonstop, and doesn't apply any CSS. The reloading issue makes me think I am using npm run build-dev wrong.

I am pretty new to webpacks, but to my understanding, the point of running "npm run build-dev", it will compile everything using my loaders and plugins without minifying everything, so I can edit and make changes in real time. Or is my understanding completely wrong.

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/client/index.js",
  mode: "development",
  devtool: "source-map",
  stats: "verbose",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: "/.js$/",
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/client/views/index.html",
      filename: "./index.html",
    }),
    new CleanWebpackPlugin({
      // Simulate the removal of files
      dry: true,
      // Write Logs to Console
      verbose: true,
      // Automatically remove all unused webpack assets on rebuild
      cleanStaleWebpackAssets: true,
      protectWebpackAssets: false,
    }),
  ],
};

Here is my full repo, but without the .env variables holding my API keys.

CodePudding user response：

Just a friendly advice: It feels like you started doing something complex without getting the basics right.

Why don't you try some of the examples first?

The webpack website is quite rich of those: https://webpack.js.org/guides/getting-started/

CodePudding user response：

Never figured out what the issue was, but when I ran it on my Mac instead of Windows, I couldn't reproduce the issue. I tried on both Chrome and FireFox without any plug-in.