Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@alloc/html-bundle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@alloc/html-bundle

Divergent fork of html-bundle that I made for simple-as-fuck SPA setups. Unfortunately no JS HMR, but it's not a big deal for me.

_{You should probably just use Vite.}

Features

ESBuild integration (TypeScript + ESM syntax, code splitting, dynamic imports)
LightningCSS integration
Browserslist integration
HTML entry point scanning
JS/CSS bundling
import.meta.glob support
--watch mode
- CSS hot reloading
- HTML rebuild on JS/HTML changes
- sets NODE_ENV=development
default mode
- HTML/JS/CSS minification
- critical CSS extraction (via isCritical option or --critical flag)
- sets NODE_ENV=production

Usage

Before running html-bundle, you should move your HTML files into the src/ directory and use relative paths for JS/CSS references inside your HTML files.

# Run in development mode
pnpm html-bundle --watch

# Run in production mode
pnpm html-bundle

If you want TypeScript to recognize import.meta.glob calls, you can add the following to your tsconfig.json file.

{
  "compilerOptions": {
    "lib": ["esnext"],
    "types": ["@alloc/html-bundle/client.d.ts"]
  }
}

Configuration

The bundle.config.js file allows for customization.

export default {
  // Browserslist targets.
  targets: ['defaults', 'not IE 11'],
  // Input and output directories.
  src: './src',
  build: './build',
  // Tool-specific options.
  esbuild: {...},
  lightningcss: {...},
  // If true, will extract critical CSS from the HTML files.
  isCritical: false,
  // If true, will delete the build directory before building.
  deletePrev: false,
}