HTML as Webpack entry point

Question

First of all, I'm completely new to web development so if my approach is totally wrong, just say so.

I want to automate build of sass and ts files, so I read about Gulp/Webpack, and seems like webpack is the way to go.

I am building a simple single page website and for now I only have a small javascript that's needed, so it makes sense in my mind that the entry point for webpack should be the html file itself. However, all the docs and tutorials only talk about starting from a .js.

Is there a way to start from the HTML and resolve js, css, images and other required stuff?

Should I just scrap using webpack and just use gulp to compile the typescript and sass?

Attorn

Do you aim at using a web framework, or at this point just vanilla JavaScript, CSS, etc.? Frameworks (e.g. Angular) sometimes come with built-in webpack support. – Recife

Also, what specific problem are you trying to solve with webpack? – Recife

Mostly automating the build processes like compiling typescript and sass, minifing pictures and such. Gulp does that, but webpack does that and more, so I thought it might be a better tool to learn – Attorn

related: #45063862 – Publia

Answer 1

One alternative would be to use Parcel, which supports having a HTML file as the entry.

Murton

Answer 2

If you have no content in the html file and you just want css files, assets ... etc you can create a folder named 'src' and index.js file in it then import these files ex:

import "../style.css";
import "../assets/img1.jpg";

this should do the job.

But if you have content in index.html then creating the html tags via js with template literals, document.body.innerHTML and document.head.innerHTML would be the easiest solution I could think of

const headContent = `
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack Version</title>
<link rel="stylesheet" href="../css/index.css">
<script src="../js/index.js" defer></script>
`;

const bodyContent = `
    <ul>
        <li>Astronauts</li>
        <li>Rockets</li>
        <li>Metoers</li>
        <li>Dishes</li>
        <li>Satellites</li>
    </ul>
    <img src="../images/logo.jpg">
    <!-- and so on -->
`;

document.body.innerHTML = bodyContent;
document.head.innerHTML = headContent;

Rigmarole

Answer 3

Strictly speaking, you can't do what you ask for your entire application

[use] HTML as a Webpack entry point

HTML files can't reference local files in your hard drive (there are templating systems, but that is a different thing). HTML files are served by a server and can only reference remote files.

With Webpack you'll be using different loaders that are able to perform different operations on files depending on what file type they have.

What you can do is:

• use HTML as a Webpack entry point for your other HTML files, if you are using a templating library or HTML imports
• use a JS file as a Webpack entry point (usually index.js) for all your JS files
• both outputs then are placed in a dist folder and the HTML output will reference your JS output, but not with a relative or absolute path (disk), it'll do it with a remote resource locator. The standard for those is the Uniform Resource Locator, a URL (relative URL). Pardon the overly detailed (pedantic) description, I just want to explain as clear as possible the reasons behind it all.

However, all the docs and tutorials only talk about starting from a .js.

For a simple website, like a single page site, usually the HTML doesn't go through any preprocessing at all. And, the only action taken during the build step is to move the file from src to dist, that is why tutorials tend to focus on the JS side.

From the description of your project, it seems like a good place for you to start experimenting with is the html-loader It supports common features like minifying, resolving images paths etc.

Arabella