Webpack dev server not working

[mh8555]

Hey there! If you need support, help, or advice then this is not the place to ask.
Please visit GitHub Discussions or StackOverflow instead.

Webpack dev server not working.

[alexander-akait]

We already doing this, please submit a reproducible repository using github and I will show the error to you

[alexander-akait]

Because you have:

 ...glob.sync("./src/pages/*.html").map((file) => {
        return new HtmlWebpackPlugin({
          template: file,
          filename: path.basename(file),
        });
      }),

this means that the new html plugin will only appear at startup, that's why when adding a new file and using the dev server you don't see it

Anyway it solved it, you need:

1. update html-webpack-plugin to the lastest version - https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md#562-2024-10-17 (release was today)
2. Use such configuration:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const glob = require("glob");
const { processHtmlLoader } = require("./html-partial-processor");
const {compile} = require("sass");

module.exports = (env, argv) => {
  const isProduction = argv.mode === "production";

  return {
    entry: "./src/js/app.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "js/app.bundle.js",
      clean: true,
    },
    devServer: {
      static: {
        directory: path.join(__dirname, "dist"),
      },
      compress: true,
      port: 3000,
      open: true,
      hot: true,
    },
    module: {
      rules: [
        {
          test: /\.(s[ac]ss|css)$/i,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : "style-loader",
            "css-loader",
            "postcss-loader",
            "sass-loader",
          ],
        },
        {
          test: /\.html$/i,
          use: [
            {
              loader: "html-loader",
              options: {
                preprocessor: processHtmlLoader,
              },
            },
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg|ico|eot|ttf|woff)$/i,
          type: "asset/resource",
          generator: {
            filename: "images/[name][ext]",
          },
        },
        {
          test: /\.m?js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        },
      ],
    },
    resolve: {
      extensions: [".js"],
    },
    plugins: [
      {
        apply: (compiler) => {
          let alreadyAdded = new Set();

          const injectPlugin = () => {
            for (const page of glob.sync("./src/pages/*.html")) {
              if (alreadyAdded.has(page)) {
                continue;
              }

              new HtmlWebpackPlugin({
                template: page,
                filename: path.basename(page),
              }).apply(compiler);
            }
          };

          injectPlugin();

          compiler.hooks.thisCompilation.tap("html-pages", (compilation) => {
            compilation.contextDependencies.add(path.resolve(__dirname, "/src/pages"));
          });

          compiler.hooks.invalid.tap("html-pages", () => {
            injectPlugin();
          })
        }
      },
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
      }),
      ...(isProduction
        ? [
            new MiniCssExtractPlugin({
              filename: "css/app.min.css",
            }),
            new ImageMinimizerPlugin({
              minimizer: {
                implementation: ImageMinimizerPlugin.imageminMinify,
                options: {
                  plugins: [
                    ["mozjpeg", { quality: 70 }],
                    ["pngquant", { quality: [0.6, 0.8], speed: 3 }],
                    ["svgo", { removeViewBox: false }],
                    ["gifsicle", { interlaced: true, optimizationLevel: 3 }],
                    ["imagemin-webp", { quality: 75 }],
                  ],
                },
              },
            }),
          ]
        : []),
    ],
    mode: isProduction ? "production" : "development",
  };
};

renaming and removing in dev-server/watch mode for HTML pages impossible because hooks used inside plugins cannot be deleted

I also recommend using - https://github.com/webpack-contrib/copy-webpack-plugin/ and https://github.com/webpack-contrib/copy-webpack-plugin/?tab=readme-ov-file#transform as alternative solution (no problems with renaming and deleting)

feel free to feedback