DEV Community: webdiscus

Bring CSS Colors to Your Terminal with Named Truecolors

webdiscus — Sat, 04 Oct 2025 15:15:53 +0000

Make your terminal a little more colorful 🌈

Modern terminals have evolved far beyond the basic 16 ANSI colors. Most now support truecolor (24-bit color), allowing you to display over 16 million colors in the terminal, just like in the browser.
If you're building CLI tools, this means your output can finally look beautiful - not limited to "red", "green", and "blue" but using any color you like.

In this article, we'll look at how to use named truecolors in Node.js with Ansis - a small ANSI color library.

Why named truecolors?

Both Chalk and Ansis let you colorize terminal output using hex() or rgb():

color.hex('#ffa500')('Orange text');
color.rgb(255, 165, 0)('Orange text');

That works, but hex codes don't feel like colors.
When you see #ffa500, you don't instantly imagine "orange".

CSS has already solved this problem with named colors.
Instead of writing hex values, you can write orange, pink, or mediumseagreen, and the meaning is instantly clear.

Now you can use these names directly in your terminal, too.

Using named truecolors with Ansis

By default, Ansis keeps its core small and includes only the base ANSI colors.
But you can extend it with any set of named truecolors using the extend() method.

This means you can easily add all CSS named colors, or just a small custom palette for your app.

Example 1: Add all CSS color names

If you want the full list of standardized CSS colors:

import ansis from 'ansis';
import colorNames from 'css-color-names';

// `colorNames` is an object like { pink: '#ffc0cb', orange: '#ffa500', ... }
// `extend()` registers each key as a chainable style on the returned instance
const color = ansis.extend(colorNames);

// All color names are now available as chainable methods:
console.log(color.pink('Pink foreground'));
console.log(color.bgPink('Pink background')); // auto-generated from "pink"

The method extend() automatically adds both foreground and background variants, so if you define pink, you get bgPink too.

Example 2: Create your own theme

If you want to keep your bundle small and only need a few named colors, define your own subset:

import ansis from 'ansis';

const myTheme = {
  orange: '#ffa500',
  pink: '#ffc0cb',
};

// Extend with only your colors
const color = ansis.extend(myTheme);

console.log(color.orange('orange foreground'));   // extended foreground
console.log(color.bgOrange('orange background')); // extended background
console.log(color.pink.italic('pink italic'));    // extended + base style

CSS named colors

So looks CSS named colors in a terminal:

Open named colors in StackBlitz

Automatic fallback for compatibility

Not all environments support full 24-bit color.

Ansis automatically detects your terminal's color level and interpolates truecolors to the nearest available color - 256-color or 16-color, so your output will still look good everywhere.

That means you can safely use named truecolors without worrying about compatibility.

Summary

✅ Most modern terminals support truecolor (16M colors)
✅ Ansis lets you use CSS-style named colors
✅ Use extend() to add named truecolors from a custom palette
✅ Automatic fallback ensures consistent appearance across environments

Automatically generate favicons and inject them into HTML with Webpack

webdiscus — Thu, 09 Nov 2023 11:32:59 +0000

Problem

We have a source image file, e.g., 1024x1024px, and we want to generate favicons of different sizes for various platforms, matching web application manifest. The webmanifest file with favicons should be generated automatically too.

Solution

For Webpack we can use the powerful html-bundler-webpack-plugin.

This bundler plugin renders a HTML template and can generate favicons automatically. Under the hood is used the Favicons Node.js module.
This module generates favicons and their associated files for many platforms such as android, apple, windows.

Install

Install modules:

npm i -D html-bundler-webpack-plugin favicons

Optional, you can install CSS and SASS loaders if you use them:

npm i -D css-loader sass-loader

Usage

For example, we have a simple HTML file, where we can specify source files of styles, scripts and images:

<!DOCTYPE html>
<html>
<head>
  <!-- source favicon file relative to this HTML file -->
  <link href="./myFavicon.png" rel="icon" />

  <!-- SCSS file relative to this HTML file -->
  <link href="./styles.scss" rel="stylesheet" />

  <!-- source script file relative to this HTML file -->
  <script src="./main.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Create minimalistic Webpack config:

const path = require('path');
// bundler plugin to render html
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
// favicon plugin to generate icons
const { FaviconsBundlerPlugin } = require('html-bundler-webpack-plugin/plugins');

module.exports = {
  mode: 'production',

  output: {
    path: path.join(__dirname, 'dist/'),
  },

  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        // define templates here
        index: './src/views/home.html', // => dist/index.html
      },
      js: {
        // output filename of JS
        filename: '[name].[contenthash:8].js',
      },
      css: {
        // output filename of CSS
        filename: '[name].[contenthash:8].css',
      },
    }),

    new FaviconsBundlerPlugin({
      enabled: 'auto', // true, false, auto - generate favicons in production mode only
      faviconOptions: {
        path: '/img/favicons', // output path
        appName: 'My App',
        icons: {
          android: true, // Create Android homescreen icon.
          appleIcon: true, // Create Apple touch icons.
          appleStartup: false, // Create Apple startup images.
          favicons: true, // Create regular favicons.
          windows: false, // Create Windows 8 tile icons.
          yandex: false, // Create Yandex browser icon.
        },
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(s?css)$/,
        use: ['css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpe?g|ico|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
};

See complete favicons options here.

The generated HTML contains output filenames of CSS and JS, but the original tag <link href="./myFavicon.png" rel="icon" /> is replaced with the generated favicon and meta tags.

The generated dist/index.html:

<!DOCTYPE html>
<html>
<head>
  <!-- original tag is replaced with tags generated by favicons module -->
  <link rel="apple-touch-icon" sizes="1024x1024" href="/img/favicons/apple-touch-icon-1024x1024.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/img/favicons/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/img/favicons/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/img/favicons/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/img/favicons/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/img/favicons/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon-180x180.png">
  <link rel="apple-touch-icon" sizes="57x57" href="/img/favicons/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/img/favicons/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/img/favicons/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicons/apple-touch-icon-76x76.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="48x48" href="/img/favicons/favicon-48x48.png">
  <link rel="icon" type="image/x-icon" href="/img/favicons/favicon.ico">
  <link rel="manifest" href="/img/favicons/manifest.webmanifest">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="My App">
  <meta name="application-name" content="My App">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#fff">

  <link href="css/styles.05e4dd86.css" rel="stylesheet" />
  <script src="js/main.f4b855d8.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

The generated dist/img/favicons/manifest.webmanifest will be looks like:

{
  "name": "My App",
  "short_name": "My App",
  "description": null,
  "dir": "auto",
  "lang": "en-US",
  "display": "standalone",
  "orientation": "any",
  "start_url": "/?homescreen=1",
  "background_color": "#fff",
  "theme_color": "#fff",
  "icons": [
    {
      "src": "/img/favicons/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/favicons/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/favicons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/favicons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/favicons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/favicons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/favicons/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/favicons/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/favicons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

This is a game-changer for web developers, making the process of generating favicons for different platforms a breeze!

Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub

3D parallax effect by moving mouse using CSS

webdiscus — Tue, 10 Oct 2023 11:01:32 +0000

This is demonstration how to create the 3D parallax effect when moving mouse using the CSS transform.

In JavaScript, we only need to listen the mousemove event and set the transformation values into CSS variables:



// get the root element
const root = document.documentElement;

document.addEventListener('mousemove', (event) => {
  // calculate transformation values
  const smoothMove = 0.01;
  const rotateX = (event.clientY - window.innerHeight / 2) * smoothMove;
  const rotateY = (event.clientX - window.innerWidth / 2) * -smoothMove / 2;

  // set CSS variables
  root.style.setProperty('--rotate-x', `${rotateX}deg`);
  root.style.setProperty('--rotate-y', `${rotateY}deg`);
});

In CSS we use the --rotate-x and --rotate-y variables for the transform:



.parallax-container {
  /* use CSS variables calculated in JavaScript */
  transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.05, 0.5, 0, 1);
  will-change: transform;
}

The background "rain effect" is created with canvas and animated using JavaScript.

See on GitHub: parallax-3d-lens-effect.

P.S. if you like it, you might be interested in my other projects:

Give Parallax 3D effect a ⭐️ on GitHub

Comparison and Benchmarks of Node.js libraries to colorize text in terminal

webdiscus — Wed, 20 Sep 2023 19:18:05 +0000

In the Node.js ecosystem, there are a lot of libraries for coloring text in the terminal. Every library claims things like "I'm the fastest" or "I'm the smallest".

Today, the most popular and widely used library is chаlk. It's feature rich and fast - but it's not perfect.

Let's dive into this colorful world and see how libraries differ.

Unpacked size of actual libraries

The package size in node_modules directory:

picocolors: 6.37 kB (not minimized) - A micro library with basic features.
аnsis: 5.89 kB (minimized) - A powerful library with a rich set of features.
chalk: 44.2 kB (not minimized) - Provides similar functionality to Ansis.

Compare the features of most popular libraries

Library ______________	Colors support		Features
- `ESM` \| `CJS` - named import	16\|256\|16m\|🌐 ____________	Fallback	Chained syntax	Nested template strings `${}`	LF `\n`	Supports ENV vars CLI flags
`ansis` `ESM` `CJS` `✅ named import`	✅ ✅ ✅ ✅	→256 →16 →b&w	✅	✅	✅	`NO_COLOR` `FORCE_COLOR` `COLORTERM` `--no-color` `--color`
`chalk v5` `ESM` `❌ named import`	✅ ✅ ✅ ✅	→256 →16 →b&w	✅	❌	✅	`NO_COLOR` `FORCE_COLOR` `--no-color` `--color`
`kolorist` `ESM` `CJS` `✅ named import`	✅ ✅ ✅ ❌	→256 →b&w	❌	❌	❌	`NO_COLOR` `FORCE_COLOR`
`cli-color` `CJS` `❌ named import`	✅ ✅ ❌ ❌	→16 →b&w	✅	❌	❌	`NO_COLOR`
`colors-cli` `CJS` `❌ named import`	✅ ✅ ❌ ❌	→b&w	✅	❌	✅	`--no-color` `--color`
`colors.js` `CJS` `❌ named import`	✅ ❌ ❌ ❌	→b&w	✅	❌	✅	`FORCE_COLOR` `--no-color` `--color`
`ansi-colors` `CJS` `❌ named import`	✅ ❌ ❌ ❌	❌	✅	❌	✅	`FORCE_COLOR`
`colorette` `ESM` `CJS` `✅ named import`	✅ ❌ ❌ ❌	→b&w	❌	❌	❌	`NO_COLOR` `FORCE_COLOR` `--no-color` `--color`
`picocolors` `CJS` `❌ named import`	✅ ❌ ❌ ❌	→b&w	❌	❌	❌	`NO_COLOR` `FORCE_COLOR` `--no-color` `--color`
`tinyrainbow` `ESM` `❌ named import`	✅ ❌ ❌ ✅	→b&w	❌	❌	❌	`NO_COLOR` `FORCE_COLOR` `FORCE_TTY` `--no-color` `--color`
`kleur` `ESM` `CJS` `✅ named import`	❌ ❌ ❌ ✅ `8` colors	→b&w	✅	❌	❌	`NO_COLOR` `FORCE_COLOR`

Colors support

Only chalk and ansis support truecolor. Other libraries are limited to 16 colors, while kleur supports only the 8 basic colors.

16 - ANSI 16 colors like red, redBright, bgRed, bgRedBright
256 - ANSI 256 colors methods, e.g.:
- ansis: fg(n), bg(n)
- chalk: ansi256(n), bgAnsi256(n)
- cli-color: xterm(n)
- colors-cli: x<n>
16m - Truecolor methods, e.g.: hex(), bgHex(), rgb(), bgRgb()
🌐 - Colored output in Chromium-based browser console:
- ✅ - colored output
- ❌ - b&w output, or fatal error by compilation or in runtime
Fallback - Truecolor → 256 colors → 16 colors → no colors

The ANSI 256 colors:

If a terminal supports only 16 colors then ANSI 256 colors will be interpolated into base 16 colors.

Using the chalk or ansis you can colorize the text with truecolor.

import { hex, rgb } from 'ansis';

// ruby color with bold style
hex('#E0115F').bold`Ruby`;
rgb(224, 17, 95).bold`Ruby`;

import chalk from 'chalk';

// ruby color with bold style
chalk.hex('#E0115F').bold`Ruby`;
chalk.rgb(224, 17, 95).bold`Ruby`;

If you use the hex(), rgb(), fg()(Ansis) or ansis256()(Chalk) functions in a terminal not supported Truecolor or 256 colors, then colors will be interpolated.

Named import

Without a named import, you use the library name to access the colors, e.g.:

import color from 'some-lib.js';

let out = color.blue('file.js') + red(' not found!');

Using the named import, you directly import only the colors you use, e.g.:

import {red, blue} from 'some-lib.js';

let out = blue('file.js') + red(' not found!');
// OR using template literals
let out = `${blue('file.js')} ${red('not found!')}`

The colorette support only named import, kleur and ansis supports both named import and normal import, others does not have a named import.

Chained syntax

Any color and style can be combined in any order.
Almost all libraries support chained syntax, except for smallest picocolors and colorette.

import {blue, bold} from 'some-lib.js';

let out = blue.underline('file.js') + bold.red(' not found!');

Nested template strings

In some complex cases you can use the nested template strings.
This feature is supported by ansis only.

import { red, green, blue } from 'ansis';

let out = red`R ${green`G ${blue.bold`B`} G`} R`;

Using the chunk it would look like:

import chalk from 'chalk';

let out = chalk.red`R` + 
            chalk.green`G` + 
              chalk.blue.bold`B` + 
            chalk.green`G` +
          chalk.red`R`;

New lines

Not all libraries support correct style break at the end of line, see the table above. For example, the smallest picocolors, colorette and kleur cannot do this.

import { bgGreen } from 'ansis';

bgGreen`\nAnsis\nNew Line\nNext New Line\n`;

Benchmark

Setup and run

git clone https://github.com/webdiscus/ansis.git
cd ./ansis/bench
npm i
npm run bench

Tested on

MacBook Pro 16" M1 Max 64GB
macOS Monterey 12.1
Node.js v16.13.1
Terminal iTerm2

Colorette bench

c.red(`${c.bold(`${c.cyan(`${c.yellow('yellow')}cyan`)}`)}red`);

+ colorette           4,572,582 ops/sec   very fast
  picocolors          3,841,124 ops/sec   very fast
  ansis               2,669,734 ops/sec   fast
  kleur/colors        2,281,415 ops/sec   fast
  chalk               2,287,146 ops/sec   fast
  kleur               2,228,639 ops/sec   fast
  ansi-colors         1,265,615 ops/sec   slow
  colors.js           1,158,572 ops/sec   slow
  cli-color             470,320 ops/sec   too slow
  colors-cli            109,811 ops/sec   too slow

Base colors

const colors = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white'];
colors.forEach((color) => c[color]('foo'));

+ picocolors          8,265,628 ops/sec  very fast
  ansis               6,197,754 ops/sec  fast
  kleur               5,455,121 ops/sec  fast
  chalk               4,428,884 ops/sec  fast
  kleur/colors        2,074,111 ops/sec  slow
  colorette           1,874,506 ops/sec  slow
  ansi-colors         1,010,628 ops/sec  slow
  colors.js             640,101 ops/sec  too slow
  cli-color             305,690 ops/sec  too slow
  colors-cli            104,962 ops/sec  too slow

Chained styles

colors.forEach((color) => c[color].bold.underline.italic('foo'));

+ ansis               5,515,868 ops/sec  very fast
  chalk               1,234,573 ops/sec  fast
  kleur                 514,035 ops/sec  slow
  ansi-colors           158,921 ops/sec  too slow
  cli-color             144,837 ops/sec  too slow
  colors.js             138,219 ops/sec  too slow
  colors-cli             52,732 ops/sec  too slow
  kleur/colors  (not supported)
  colorette     (not supported)
  picocolors    (not supported)

Nested calls

colors.forEach((color) => c[color](c.bold(c.underline(c.italic('foo')))));

+ picocolors            942,592 ops/sec  very fast
  colorette             695,350 ops/sec  fast
  kleur                 648,195 ops/sec  fast
  kleur/colors          561,111 ops/sec  fast
  ansis                 558,575 ops/sec  fast
  chalk                 497,292 ops/sec  fast
  ansi-colors           260,316 ops/sec  slow
  colors.js             166,425 ops/sec  slow
  cli-color              65,561 ops/sec  too slow
  colors-cli             13,800 ops/sec  too slow

Nested styles

c.red(
  `a red ${c.white('white')} red ${c.red('red')} red ${c.cyan('cyan')} red ${c.black('black')} red ${c.red(
    'red'
  )} red ${c.green('green')} red ${c.red('red')} red ${c.yellow('yellow')} red ${c.blue('blue')} red ${c.red(
    'red'
  )} red ${c.magenta('magenta')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red(
    'red'
  )} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red(
    'red'
  )} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.green(
    'green'
  )} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red(
    'red'
  )} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.magenta(
    'magenta'
  )} red ${c.red('red')} red ${c.red('red')} red ${c.cyan('cyan')} red ${c.red('red')} red ${c.red(
    'red'
  )} red ${c.yellow('yellow')} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} red ${c.red(
    'red'
  )} red ${c.red('red')} red ${c.red('red')} red ${c.red('red')} message`
);

+ picocolors            243,975 ops/sec  very fast
  colorette             243,139 ops/sec  very fast
  kleur/colors          234,132 ops/sec  very fast
  kleur                 221,446 ops/sec  very fast
  ansis                 211,868 ops/sec  very fast
  chalk                 189,960 ops/sec  fast
  ansi-colors           121,451 ops/sec  slow
  colors.js              89,633 ops/sec  too slow
  cli-color              41,657 ops/sec  too slow
  colors-cli             14,264 ops/sec  too slow

Deep nested styles

c.green(
  `green ${c.cyan(
    `cyan ${c.red(
      `red ${c.yellow(
        `yellow ${c.blue(
          `blue ${c.magenta(`magenta ${c.underline(`underline ${c.italic(`italic`)} underline`)} magenta`)} blue`
        )} yellow`
      )} red`
    )} cyan`
  )} green`
);

+ colorette           1,131,757 ops/sec  very fast
  picocolors          1,002,649 ops/sec  very fast
  ansis                 882,220 ops/sec  fast
  chalk                 565,965 ops/sec  fast
  kleur/colors          478,547 ops/sec  fast
  kleur                 464,004 ops/sec  fast
  colors.js             451,592 ops/sec  fast
  ansi-colors           362,733 ops/sec  slow
  cli-color             213,441 ops/sec  slow
  colors-cli             40,340 ops/sec  too slow

HEX colors

Only two libraries supported truecolor methods: ansis and chalk

c.hex('#FBA')('foo');

+ ansis               4,944,572 ops/sec  very fast
  chalk               2,891,684 ops/sec  fast
  colors.js             (not supported)
  colorette             (not supported)
  picocolors            (not supported)
  cli-color             (not supported)
  colors-cli            (not supported)
  ansi-colors           (not supported)
  kleur/colors          (not supported)
  kleur                 (not supported)

Conclusion

There is definitely no fastest, smallest and most functional library.
But we can identify 3 main leaders:

picocolors smallest and fastest for simple use cases
chalk most popular and fast for commonly use cases
ansis small, very fast (faster than chalk) and powerful for simple and complex use cases

Don't be afraid to be modern and experiment with new things.

P.S.

The ansis is not as popular (yet) as chalk, but give a chance to a new, modern, powerful library. Just try this in your new project.

import { black, cyan, green, inverse, red } from 'ansis';

let out = green`Hello ${inverse`ANSI`} World!
${black.bgYellow`Warning:`} ${cyan`file.js`} ${red`not found!`}`;

console.log(out);

The output:

View and edit this example in browser:

Auto generate integrity attribute for script and style tags in HTML using Webpack

webdiscus — Wed, 06 Sep 2023 12:15:37 +0000

What is integrity hash?

The subresource integrity hash is a cryptographic value of the integrity attribute that used by a browser to verify that the content of an asset has not been manipulated. If the asset has been manipulated, the browser will never load it.

The integrity attribute can be used with the script and link tags.

Webpack plugin

You need to install the html-bundler-webpack-plugin:



npm install html-bundler-webpack-plugin --save-dev

The Bundler Plugin generate the integrity hashes and adds the integrity attribute to the link and script tags when generating HTML.

For example, we have a simple HTML template with a script and a style:



<html>
  <head>
    <!-- include source style -->
    <link href="./style.scss" rel="stylesheet" />
    <!-- include source script -->
    <script src="./main.js" defer="defer"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

The Webpack config:



const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  output: {
    // required for subresource integrity to work
    crossOriginLoading: 'anonymous',
  },
  plugins: [
    // renders templates and injects integrity hash
    new HtmlBundlerPlugin({
      entry: {
        // template where are included link and script tags
        index: 'src/views/index.html',
      },
      js: {
        // the JS filename must contains a contenthash
        filename: 'js/[name].[contenthash:8].js',
      },
      css: {
        // the CSS filename must contains a contenthash
        filename: 'css/[name].[contenthash:8].js',
      },
      // include `integrity` attribute in production mode only
      integrity: 'auto',
    }),
  ],
};

The generated HTML file dist/index.html contains the integrity hashes:



<html>
  <head>
    <link
      href="css/style.2a9f3a27.css"
      rel="stylesheet"
      integrity="sha384-gaDmgJjLpipN1Jmuc98geFnDjVqWn1fixlG0Ab90qFyUIJ4ARXlKBsMGumxTSu7E"
      crossorigin="anonymous" />

    <script
      src="js/main.d461fe16.js"
      defer="defer"
      integrity="sha384-E4IoJ3Xutt/6tUVDjvtPwDTTlCfU5oG199UoqWShFCNx6mb4tdpcPLu7sLzNc8Pe"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Note

The integrity hash is generated when using webpack build in the production mode.
When using webpack watch or serve, no hashes will be generated because it doesn't make sense.

View in browser

Open generated dist/index.html. The link and script tags will contain the integrity attribute with a hash.

Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub

Using HTML Bundler Plugin for Webpack to generate HTML files

webdiscus — Sun, 06 Aug 2023 22:00:00 +0000

Webpack works for building JavaScript bundles, but does not support neither the HTML nor the CSS files out of the box.
To bundle compiled JavaScript and CSS with HTML we can use the powerful html-bundler-webpack-plugin.

Install

The first step is to install the plugin:

npm install html-bundler-webpack-plugin --save-dev

Install additional packages for styles:

npm install css-loader sass-loader sass --save-dev

A simple static site

We've created some static files to demonstrate how the plugin handles references in the HTML to script, style and image source files:

src/views/index.html <= entrypoint
src/js/main.js
src/scss/style.scss
src/images/favicon.ico
src/images/picture.png (size > 2 KB)
src/images/icon.png    (size < 2 KB)

Create the index.html file in the src/views/ directory:

<!doctype html>
<html lang="en">
<head>
  <title>Home</title>
  <link href="../images/favicon.ico" rel="shortcut icon">
  <link href="../scss/style.scss" rel="stylesheet">
  <script src="../js/main.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <img src="../images/picture.png" alt="picture">
  <img src="../images/icon.png" alt="icon">
</body>
</html>

To bind our style and script files to HTML, we specify them directly in the HTML using relative paths to the source files.

With a complex file structure, some relative paths might be like ../../../images. To avoid such unreadable paths, is recommended to use Webpack aliases.

The plugin allows us to use both relative paths and Webpack aliases.

We'll be using aliases, so we'll define them in the Webpack resolve.alias option:

{
  '@scripts': path.join(__dirname, 'src/js'),
  '@styles': path.join(__dirname, 'src/scss'),
  '@images': path.join(__dirname, 'src/images'),
}

Then change all relative paths in index.html to the aliases:

<!doctype html>
<html lang="en">
<head>
  <title>Home</title>
  <link href="@images/favicon.ico" rel="shortcut icon">
  <link href="@styles/style.scss" rel="stylesheet">
  <script src="@scripts/main.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <img src="@images/picture.png" alt="picture">
  <img src="@images/icon.png" alt="icon">
</body>
</html>

So HTML looks better and cleaner.

Processing HTML templates

Webpack doesn’t know how to handle HTML templates, but the html-bundler-webpack-plugin can render any template and place the generated HTML into the output directory.

Configure the plugin in the webpack.config.js to handle index.html:

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        // define templates here
        index: 'src/views/index.html', // => dist/index.html
      },
    }),
  ],
  // ...
};

We can define HTML templates in the entry option of the plugin.
The entry key is the output filename without .html extension, and the value is the template file. So we can define many templates in the entry option.

Automatically processing many HTML templates

There is one template file, but it would be tedious to update the Webpack config every time templates are added or removed. Instead of manually adding other templates, let’s modify the configuration to automatically include all templates it finds.

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      // relative or absolute path to templates
      entry: 'src/views/',
    }),
  ],
  // ...
};

If the entry option is a path, the plugin finds all templates automatically and keep the same directory structure in the output directory. So we can create many templates in the entry directory, without restarting Webpack running in serve mode.

Processing styles

To compile Sass files specified in HTML to CSS, add the module rule:

module.exports = {
   // ...
   module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
    ],
  },  
  // ...
};

The plugin extracts CSS from compiled Sass files and save as a separate file into the output directory.

Processing images

The plugin resolves image references specified in HTML and allows Webpack to copy those images to the output directory. We can define a hashed output filename for images using the generator.filename in the rule:

module.exports = {
   // ...
   module: {
    rules: [
      {
        test: /\.(ico|png|jpe?g|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:8][ext]',
        },
      },
    ],
  },  
  // ...
};

To optimise loading of small images we can inline images directly in the HTML using the type: 'asset' and parser.dataUrlCondition.maxSize in the rule:

module.exports = {
   // ...
   module: {
    rules: [
      {
        test: /\.(ico|png|jpe?g|svg)$/,
        type: 'asset',
        generator: {
          // save images to file
          filename: 'img/[name].[hash:8][ext]',
        },
        parser: {
          dataUrlCondition: {
            // inline images < 2 KB
            maxSize: 2 * 1024
          }
        },
      },
    ],
  },  
  // ...
};

The plugin automatically inline Images smaller then maxSize.

Output filenames for JS and CSS

By default, the processed JS and CSS files will be saved in the output directory under unhashed filenames. But it's recommended to use hashed output filenames.

We can define the output filenames for JS and CSS in the plugin options:

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: 'src/views/index.html',
      },
      js: {
        // output filename for JS
        filename: 'js/[name].[contenthash:8].js',
      },
      css: {
        // output filename for CSS
        filename: 'css/[name].[contenthash:8].css',
      },
    }),
  ],
  // ...
};

Optional, you can inline JS and CSS in HTML using the js.inline and the css.inline plugin options.

Live Reload

To enable reloading of the browser after changes, add the devServer option to the Webpack config:

module.exports = {
  // enable HMR with live reload
  devServer: {
    static: path.join(__dirname, 'dist'),
    watchFiles: {
      paths: ['src/**/*.*'],
      options: {
        usePolling: true,
      },
    },
  },
};

Final Webpack configuration

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  mode: 'development',

  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },

  resolve: {
    alias: {
      '@scripts': path.join(__dirname, 'src/js'),
      '@styles': path.join(__dirname, 'src/scss'),
      '@images': path.join(__dirname, 'src/images'),
    },
  },

  plugins: [
    new HtmlBundlerPlugin({
      // path to templates
      entry: 'src/views/',
      js: {
        // output filename for JS
        filename: 'js/[name].[contenthash:8].js',
      },
      css: {
        // output filename for CSS
        filename: 'css/[name].[contenthash:8].css',
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
      {
        test: /\.(ico|png|jpe?g|svg)/,
        type: 'asset',
        generator: {
          // save images to file
          filename: 'img/[name].[hash:8][ext]',
        },
        parser: {
          dataUrlCondition: {
            // inline images < 2 KB
            maxSize: 2 * 1024,
          },
        },
      },
    ],
  },

  // enable HMR with live reload
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    watchFiles: {
      paths: ['src/**/*.*'],
      options: {
        usePolling: true,
      },
    },
  },
};

Conclusion

The generated HTML contains the output filenames of the processed files and inlined small image. All processed files are paced in the dist/ output directory.

<!doctype html>
<html lang="en">
<head>
  <title>Home</title>
  <link href="img/favicon.34fd67a8.ico" rel="shortcut icon">
  <link href="css/style.f042b772.css" rel="stylesheet">
  <script src="js/main.b35246f4.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <img src="img/picture.7b396424.png" alt="picture">
  <!-- src contains "data:image/png;base64,iVBORwSU..." -->
  <img src="..." alt="icon">
</body>
</html>

With just one html-bundler-webpack-plugin you can very easily set up Webpack to generate static HTML files.

View source code on GitHub

Try it out in browser

Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub

Keep output directory structure in Webpack

webdiscus — Wed, 02 Aug 2023 11:30:40 +0000

Some web projects may have many HTML templates that need to be compiled and placed in the output directory, e.g. dist/. When we have 5-10 pages we can easily define each page manually in the webpack config, but when we have 20-30 or more pages with a complex directory structure it can get tedious.

Luckily there is the HTML Bundler plugin for Webpack that read all files in the template directory and save compiled HTML files with the same structure in the output directory.

For example, there are templates in the src/views/ source directory:

src/views/index.html
src/views/about/index.html
src/views/news/sport/index.html
src/views/news/sport/hockey/index.html
src/views/news/sport/football/index.html
...

We want to have the same folder structure in the dist/ directory:

dist/index.html
dist/about/index.html
dist/news/sport/index.html
dist/news/sport/hockey/index.html
dist/news/sport/football/index.html
...

Just install the html-bundler-webpack-plugin:

npm install html-bundler-webpack-plugin --save-dev

Add the plugin in the Webpack config:

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: 'src/views/', // the template directory
    }),
  ],
};

All templates from the src/views/ directory will be compiled and saved in the dist/ directory with the same structure.

You can try the example in browser:

The plugin supports template engines such as Eta, EJS, Handlebars, Nunjucks "out of the box" without additional loaders and plugins.

P.S. This powerful plugin does not require additional plugins such as html-webpack-plugin, mini-css-extract-plugin.

Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub

New way to build a web application with Webpack

webdiscus — Sun, 25 Jun 2023 14:09:55 +0000

What do we need to build a web application?

HTML file or template
style source files
JavaScript source files
Webpack to compile resources
html-bundler-webpack-plugin to compile an HTML template containing references to source styles, scripts, images, etc.

Using the HTML bundler plugin for Webpack, you can specify the source files of styles, scripts, images and other resources directly in the template. The plugin detects all source files and replaces them with output filenames of processed resources.

This plugin supports any templating engine "out of the box", e.g.: EJS, Eta, Handlebars, Nunjucks and others. You don't need additional plugins and loaders.

Simple usage example

Add source scripts and styles directly to HTML:



<html>
<head>
  <!-- specify source style files -->
  <link href="./style.scss" rel="stylesheet">
  <!-- specify source script files here and/or in body -->
  <script src="./main.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <!-- specify source image files -->
  <img src="./map.png">
</body>
</html>

Add the template files to the entry plugin option in webpack.config.js:



const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      // define a relative or absolute path to template pages
      entry: 'src/views/',
      // OR define templates manually
      entry: {
        index: 'src/views/home.html', // => dist/index.html
        'news/sport': 'src/views/news/sport/index.html', // => dist/news/sport.html
      },
      js: {
        // output filename of JS
        filename: 'assets/js/[name].[contenthash:8].js',
      },
      css: {
        // output filename of CSS
        filename: 'assets/css/[name].[contenthash:8].css',
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
      {
        test: /\.(ico|png|jp?g|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name].[hash:8][ext][query]',
        },
      },
    ],
  },
};

Optional you can define the output filename of JS and CSS using the js.filename and css.filename plugin options.

The generated HTML contains the output filenames of the processed source files, while the script and link tags remain in place:



<html>
<head>
  <link href="assets/css/style.05e4dd86.css" rel="stylesheet">
  <script src="assets/js/main.f4b855d8.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <img src="assets/img/map.58b43bd8.png">
</body>
</html>

Now you can use the template as an entrypoint to easily bind all source resources to HTML.

Note

The powerful html-bundler-webpack-plugin works standalone, without additional plugins and loaders such as: html-webpack-plugin, mini-css-extract-plugin, html-loader, style-loader, don't install them.

For a quick start, you can use the multiple pages boilerplate.

The complete documentation with examples see on the GitHub.

Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub