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

Answer 1

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

Answer 2

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.