Inline your webpack runtime chunk(s) when using html-webpack-plugin.

Downloads in past


1.3.03 years ago4 years agoMinified + gzip package size for html-webpack-inline-runtime-plugin in KB


github actions npm
Automatically creates inline scripts for your runtime chunk(s) based on your runtimeChunk setting in the optimization key of webpack settings. Requires html-webpack-plugin.
See optimization.runtimeChunk in the webpack documentation for the valid configuration settings. The plugin itself needs no configuration, it should activate automatically as long as runtimeChunk isn't disabled/not set.


Here is a simplified webpack configuration that would activate this plugin. This config also uses [contenthash] in the filename and hashes module ids (neither are a requirement of the plugin) to help with long term caching which might be of interest for those that are already optimizing their runtime http requests.
const HtmlPlugin = require("html-webpack-plugin");
const HtmlRuntimePlugin = require("html-webpack-inline-runtime-plugin");

module.exports = {
  mode: "production",
  output: {
    filename: "[name].[contenthash].js"
  optimization: {
    moduleIds: "hashed",
    runtimeChunk: "single" // config value that the plugin reads
  plugins: [
    new HtmlPlugin(),
    new HtmlRuntimePlugin()