CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-script-ext-html-webpack-plugin

Enhances html-webpack-plugin functionality with async and defer attributes for script elements

—

Pending
Overview
Eval results
Files

script-inlining.mddocs/

Script Inlining

Inline script content directly into HTML instead of generating separate files, with automatic asset cleanup.

Capabilities

Inline Configuration

Configure scripts to be inlined directly into the HTML document for optimal loading performance.

/**
 * Configure script inlining
 * @param pattern - Pattern(s) to match script files for inlining
 */
inline?: PatternConfig;

interface PatternConfig {
  test: string | RegExp | Array<string | RegExp>;
}

Usage Examples:

// Inline a single script
new ScriptExtHtmlWebpackPlugin({
  inline: 'runtime.js'
})

// Inline multiple scripts
new ScriptExtHtmlWebpackPlugin({
  inline: ['runtime.js', 'polyfills.js']
})

// Pattern-based inlining
new ScriptExtHtmlWebpackPlugin({
  inline: /^runtime.*\.js$/
})

// Advanced configuration
new ScriptExtHtmlWebpackPlugin({
  inline: {
    test: ['runtime.js', /small.*\.js$/]
  }
})

Asset Cleanup

Control whether inlined assets are removed from the webpack compilation output.

/**
 * Whether to remove inlined assets from compilation
 * @default true
 */
removeInlinedAssets?: boolean;

Usage Examples:

// Remove inlined assets (default behavior)
new ScriptExtHtmlWebpackPlugin({
  inline: 'runtime.js',
  removeInlinedAssets: true
})

// Keep inlined assets in output
new ScriptExtHtmlWebpackPlugin({
  inline: 'runtime.js',  
  removeInlinedAssets: false
})

Inlining Process

The plugin inlines scripts by replacing <script src="..."> tags with <script>...</script> tags containing the actual script content.

Before inlining:

<script src="runtime.js"></script>

After inlining:

<script>
// Webpack runtime code here
(function() { ... })();
</script>

Best Practices for Inlining

Ideal candidates for inlining:

  • Small runtime scripts
  • Critical path scripts
  • Polyfills and feature detection
  • Configuration scripts

Not recommended for inlining:

  • Large application bundles
  • Third-party libraries
  • Scripts that benefit from caching

Usage Examples:

// Inline critical scripts for performance
new ScriptExtHtmlWebpackPlugin({
  inline: ['runtime.js', 'critical.js'],
  async: /^(?!runtime|critical).*\.js$/,
  removeInlinedAssets: true
})

// Complex pattern example with multiple conditions
new ScriptExtHtmlWebpackPlugin({
  inline: ['runtime.js', /^small.*\.js$/],
  removeInlinedAssets: true
})

Development Considerations

Hot Module Replacement: Inlined scripts may not work properly with webpack's Hot Module Replacement (HMR). For development, consider disabling inlining or configuring html-webpack-plugin with caching disabled:

// Development configuration
const isProduction = process.env.NODE_ENV === 'production';

new ScriptExtHtmlWebpackPlugin({
  inline: isProduction ? 'runtime.js' : []
})

// Or disable html-webpack-plugin caching
new HtmlWebpackPlugin({
  cache: false  // Required for HMR with inlined scripts
})

Minification: Even simple scripts are wrapped with webpack boilerplate. Ensure JavaScript minification is enabled for legible HTML output:

// Webpack production configuration
module.exports = {
  mode: 'production', // Enables minification
  plugins: [
    new ScriptExtHtmlWebpackPlugin({
      inline: 'runtime.js'
    })
  ]
};

Error Handling

The plugin will throw a standard Error if a script specified for inlining cannot be found in the compilation assets.

/**
 * Error thrown when inlined asset is not found
 * Uses standard Error class with descriptive message
 */
function throwInlineError(scriptName: string): void;

Example error:

ScriptExtHtmlWebpackPlugin: no asset with href 'missing-script.js'

The error is thrown during the alterAssetTagsCallback phase when the plugin attempts to inline a script that doesn't exist in the webpack compilation assets.

Integration with Other Features

Inlining works in combination with other plugin features:

// Complex configuration with inlining
new ScriptExtHtmlWebpackPlugin({
  inline: 'runtime.js',           // Inline runtime
  async: /chunk.*\.js$/,          // Async chunks  
  preload: 'critical.js',         // Preload critical
  custom: [{                      // Custom attributes
    test: /\.js$/,
    attribute: 'nonce',
    value: 'abc123'
  }],
  removeInlinedAssets: true
})

This configuration will:

  1. Inline the runtime script directly into HTML
  2. Make chunk scripts async
  3. Add preload hints for critical scripts
  4. Add nonce attributes to all scripts (including inlined ones)
  5. Remove the inlined runtime.js from webpack output

Install with Tessl CLI

npx tessl i tessl/npm-script-ext-html-webpack-plugin

docs

custom-attributes.md

index.md

plugin-configuration.md

resource-hints.md

script-attributes.md

script-inlining.md

tile.json