I am trying to figure out why I can navigate to about.html, but not back to home (temp.html) in Webpack server. It works without flaw in VSCode Live Server though. I've searched for answers, but nothing is working for me so far...or I simply can't recognize what solutions will work since I'm a beginner at this.
Below is my web pack.config.js file. I made two html templates and required htmlwebpackplugin at the top. Please never mind my comments...those are just for my learning.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development", //production
entry: {
main: path.resolve(__dirname, "src/app.js"),
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[contenthash].js",
assetModuleFilename: "[name][ext]", //preserves original file name
clean: true, //removes previous builds from dist folder...or use false to have a sort of version control
},
devtool: "inline-source-map", //keeps track where everything comes from (error tracking)
devServer: {
static: path.resolve(__dirname, "dist"),
port: 5001, //default 8080, but can choose desire port
open: true, //opens the dev server automatically
hot: true, //hot module reloading
// watchContentBase: true, (Not necessary now)
},
//loaders
module: {
rules: [
// CSS
{ test: /\.css$/, use: ["style-loader", "css-loader"] }, //right to left
// Images
{ test: /\.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: "asset/resource" },
// Js for Babel (transpiles modern code into code for older browsers to read)
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
//plugins
plugins: [
new HtmlWebpackPlugin({
title: "Placeholder",
filename: "index.html",
template: path.resolve(__dirname, "src/temp.html"),
}),
new HtmlWebpackPlugin({
title: "About",
filename: "about.html",
template: path.resolve(__dirname, "src/about.html"),
}),
],
};
In the package.json you can see I have the html-webpack-plugin installed.
{
"name": "src",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.19.0",
"@babel/preset-env": "^7.19.0",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.10.1"
}
}
The temp.html and about.html in the src folder are both linked to each other.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./about.html">About</a></li>
</ul>
</nav>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./temp.html">Home</a></li>
</ul>
</nav>
</header>
</body>
</html>
Here is the app.js in the src folder. The "Aloha!" console log can be ignored here.
import style from "./main.css";
import logo from "./logo 2.png";
console.log("Aloha!");
The build runs without error. Everything get inserted into the dist folder just fine. It's just when I try to navigate back to home (temp.html) using the "npm run dev" server I am met with a "Cannot GET /temp.html". How am I able to resolve this issue?
