Webpack Dev Server not recognizing newly created HTML or other files during development

[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.

I’m using Webpack Dev Server to serve my project files, but I’m encountering an issue where any new HTML files (or other pages) I create after starting the server (npm start) are not accessible through the browser.

Problem:

When I start the development server with npm start, I can access existing HTML files (like index.html). Also If I made any changes to the existing files then it's updating nicely.

But, if I create a new HTML file or other files in the src, src/pages, src/js etc directory after starting the server, I cannot access it through the browser (e.g., Cannot GET /about.html).

My Project Structure

my-project/ ├── dist/ ├── src/ │ ├── css/ │ ├── images/ │ ├── js/ │ └── pages/ │ ├── index.html │ └── about.html // New page added └── webpack.config.js

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");

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: [ ...glob.sync("./src/pages/*.html").map((file) => { return new HtmlWebpackPlugin({ template: file, filename: path.basename(file), }); }), 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",

}; };

{ "name": "marketpro", "version": "1.0.0", "main": "index.js", "scripts": { "start": "webpack serve --mode development", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "animate.css": "^4.1.1", "aos": "^2.3.4", "jquery": "^3.7.1", "jquery-ui": "^1.14.0", "jquery.marquee": "^1.6.0", "marketpro": "file:", "select2": "^4.1.0-rc.0", "slick-carousel": "^1.8.1", "vanilla-tilt": "^1.8.1", "wowjs": "^1.1.3" }, "devDependencies": { "@babel/core": "^7.25.8", "@babel/preset-env": "^7.25.8", "@fullhuman/postcss-purgecss": "^6.0.0", "autoprefixer": "^10.4.20", "babel-loader": "^9.2.1", "css-loader": "^7.1.2", "cssnano": "^7.0.6", "glob": "^11.0.0", "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.0", "image-minimizer-webpack-plugin": "^4.1.0", "imagemin": "^9.0.0", "imagemin-gifsicle": "^7.0.0", "imagemin-mozjpeg": "^10.0.0", "imagemin-pngquant": "^10.0.0", "imagemin-svgo": "^11.0.1", "imagemin-webp": "^8.0.0", "mini-css-extract-plugin": "^2.9.1", "nodemon": "^3.1.7", "postcss": "^8.4.47", "postcss-loader": "^8.1.1", "postcss-preset-env": "^10.0.7", "sass": "^1.79.5", "sass-loader": "^16.0.2", "style-loader": "^4.0.0", "tailwindcss": "^3.4.13", "webpack": "^5.95.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.1.0" } }

I'll be very very thankful If anyone help me to solve this. I tried many solutions, but everytime I failed. Thanks in advance.

[alexander-akait]

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

[mh8555]

Many many thanks for reviewing my problem. Please take a look at [https://github.com/mh8555/starter-pack]

1. run npm start, after the development server starts If I change or add content to the existing files , it update everytime and show the changes, but If I create any new file (html, js) in the src folder and then If I want to access them in the browser I'm getting a cannot get (example.html) error and blank page, but if I stop and rerun the development server then it's working finely.

2. For using html partial I'm using a custom html-partial-processor.js file in my src folder with the help of html-loader. Is there any other default way so that I can do this without any custom file. { test: /.html$/i, use: [ { loader: "html-loader", options: { preprocessor: processHtmlLoader, }, }, ], },

I'm trying to solve these problems from a week. I tried many example and solutions of others. Every time I failed. Because maximum solutions were provided 5-8 years ago. I'll be very thankful If you help me to solve this. Thanks in advance.