I’m trying to add a button that redirects to a new page called “app.html” which is part of my project, but I haven’t been able to do it since no matter what I do I always get something unexpected.
I read that a tags are quite weirs when using webpack, so I added the necessary lines (according to what I’ve seen online) to the webpack config file like this:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: {
home: "./src/index.js",
app: "./src/pages/app.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
clean: true,
},
devServer: {
static: {
directory: path.resolve(__dirname, "dist"),
},
port: 3000,
open: true,
hot: true,
compress: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader",
},
],
},
{
test: /.css$/i,
include: path.resolve(__dirname, "src"),
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /.svg$/,
use: [
{
loader: "svg-url-loader",
options: {
limit: 10000,
},
},
],
},
{
test: /.html$/i,
loader: "html-loader",
options: {
sources: {
list: [
"...",
{
tag: "a",
attribute: "href",
type: "src",
},
],
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "src/views/index.html",
chunks: ["home"],
}),
new HtmlWebpackPlugin({
filename: "app.html",
template: "src/views/app.html",
chunks: ["app"],
}),
],
};
I added the options arguments to include a tags correctly. However, in my home.js file I imported the html file I want to redirect the user to:
import appPage from "html-loader!../views/app.html";
And then I created a button on my index.html by injecting it with vanilla JS such as this:
const startButton = document.createElement("a");
startButton.id = "start-button";
startButton.innerText = "Get Started";
startButton.href = loginPage;
However, when clicking on the button I get to a new page about:blank#blocked and not to the page I’m actually referencing on the href tag. By inspecting the website I can see the a tag has the following content:
<a id="start-button" href="// Module
var code = "<!DOCTYPE html>rn<html lang="en">rnt<head>rntt<meta charset="UTF-8" />rntt<meta name="viewport" content="width=device-width, initial-scale=1.0" />rntt<title>Todoers</title>rnt</head>rnt<body>rntt<h1 class="text-7xl font-bold">HELLO TODOERS, LOGIN HERE</h1>rnt</body>rn</html>rn";
// Exports
export default code;">Get Started</a>
Which is in fact the raw content of the app.html file itself. I’m not sure it should be doing that, I would guess the correct way would be to have a new app.html file inside the src folder (which is being created by webpack correctly) and then reference that file, since I will be using different bundles.
I’m extremely confused by this, any help would be appreciated. I’ll leave a link to the GitHub repo as well, which has the latest build of the project.