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
My 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",
};
};
My package.json
{
"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.
