Introduction

The term "entry point" is commonly used to refer to the root module in an application's module graph - effctively where JavaScript bundling starts. However, on the Web the "entry point" into an application is always HTML: when navigating to a page, the browser receives an HTML document that controls which resources and scripts are loaded. While JavaScript dominates much of the tooling landscape, there are a number of cases where the process of building or bundling an application can be applicable even if there is no JavaScript present. Much the same as JavaScript bundles can be optimized and their URLs hashed, so can resources depended on by an HTML page and its StyleSheets.

The Test

This test checks to see if it's possible to use non-JavaScript resources as the entry point of a build. It builds starting from an HTML file, which contains references to some scripts that need to be bundled and a stylesheet that needs to be transformed.

index.html

<!DOCTYPE html>
<link rel="stylesheet" href="./styles.css" />
<script type="module" src="./index.js"></script>
<script src="./util.js"></script>

index.js

import { logCaps } from './util.js';
logCaps('Oh hello there!');

util.js

export function logCaps(msg) {
  console.log(msg.toUpperCase());
}

styles.css

html {
  background: green;
}

The output after building should be the processed HTML file, along with one or two JavaScript bundles and a CSS file. The JavaScript and CSS files should have hashed URLs, and the HTML file should be updated with those hashed references.

Conclusion

browserify

Gulp does not differentiate between the file formats used as entry points in a build. Any set of files can be used as the "source" of a build, and stream processing can be applied to any type of file.

This test uses gulp-rev to hash CSS and JS files, then uses gulp-rev-collector to replace references to those files in the HTML entry file.

(Note: If you are using Browserify to bundle your JavaScirpt, you would run it before rev() in the scriptHash function.)

parcel

rollup

Although you can treat HTML as an entry point, you have to fight Rollup to avoid outputting a module. Also, there's no standard way to defer the loading of assets to other plugins, so the plugin that handles the HTML entry point must also know how to load things like CSS.

Issues

Allow plugins to handle assets

webpack

In Webpack, entry modules are generally JavaScript, and HTML is typically generated using something like html-webpack-plugin. It is more difficult to set things up where HTML is the entry format for builds, however it is possible to accomplish by applying a loader that transforms HTML files into JavaScript modules that export the HTML as a string and with assets converted to imports. This introduces the assets into Webpack's module graph, allowing them to be tracked and processed by loaders and plugins.

tooling.report

Entry points

Introduction

The Test

Conclusion

Issues