webpack-fastify-hmr

webpack-fastify-hmr

A Fastify plugin for serving files emitted by Webpack.

Setup

import webpack from 'webpack';
import {
  fastifyWebpack,
} from 'fastify-webpack';

const compiler = webpack();

void app.register(fastifyWebpack, {
  compiler,
});

Response Compression

This plugin is compatible with compression-webpack-plugin, i.e. This plugin will serve compressed files if the following conditions are true:

• Your outputs include compressed file versions (either .br or .gz)
• Request includes a matching accept-encoding header

Example compression-webpack-plugin configuration:

new CompressionPlugin({
  algorithm: 'brotliCompress',
  deleteOriginalAssets: false,
  filename: '[path][base].br',
  compressionOptions: {
    level: zlib.constants.BROTLI_MIN_QUALITY,
  },
  minRatio: 0.8,
  test: /\.(js|css|html|svg)$/,
  threshold: 10_240,
})

Note: You may also try using fastify-compress, however, beware of the outstanding issue that may cause the server to crash (fastify-compress#215).

Difference from webpack-dev-server

• Does not allow to override default HTTP methods (GET, HEAD).
• Does not allow to provide custom headers.
• Does not allow to create an index.
• Does not support serverSideRender
• Does not support writeToDisk
• Does not support MultiCompiler
• Does not support Accept-Ranges

All of the above are relatively straightforward to implement, however, I didn't have a use-case for them. If you have a use-case, please raise a PR.

Debugging

This project uses roarr logger to output the program's state.

Export ROARR_LOG=true environment variable to enable log printing to stdout.

Use roarr-cli program to pretty-print the logs.