TemplatedAssetsWebpackPlugin

4.0.0 verified Sat Apr 25 auth: no javascript

A webpack plugin for generating server-side partial views from webpack assets, enabling SSR frameworks to reference hashed assets without hardcoding. v4.0.0 (current stable) supports Rspack and webpack 5+, with breaking change dropping webpack v2-4 support. v3.x supports webpack v2-5. Key differentiators over other asset plugins: built-in templates for inlining or referencing scripts/styles, rule-based matching by chunk name or regex, and support for custom template functions.

Common errors

error Error: Cannot find module 'templated-assets-webpack-plugin' ↓

cause Package not installed or running in wrong directory.

fix

Run 'npm install templated-assets-webpack-plugin --save-dev' or check node_modules path.

error TypeError: TemplatedAssetsWebpackPlugin is not a constructor ↓

cause Using default import syntax with CJS package.

fix

Use require('templated-assets-webpack-plugin') instead of import.

error Error: Template rule 'name' must be a string or array of strings ↓

cause Providing a single string as 'name' is fine, but other types (e.g., object) cause this error.

fix

Ensure each rule's 'name' is a string or array of strings.

error webpack v5: Compilation.hooks.processAssets is not a function ↓

cause Plugin version incompatible with webpack v5 (using v1 or v2).

fix

Upgrade to templated-assets-webpack-plugin@v3 or v4 for webpack v5 support.

Warnings

breaking Dropped support for webpack v2-4 in v4.0.0 ↓

fix Upgrade to webpack v5+, or use templated-assets-webpack-plugin@v3 for webpack v2-4.

breaking In v3.0.0, default publicPath behavior changed: unconfigured publicPath now generates paths without leading slash. ↓

fix If you rely on absolute paths (/), set webpack output.publicPath explicitly.

gotcha Plugin does not export ES modules; CJS only. ↓

fix Use require() instead of import statements. For ESM projects, use createRequire or transpile.

gotcha Configuration key is 'rules', not 'rule'. ↓

fix Use rules: [...] in the plugin options object.

gotcha When using 'test' and 'name' together, 'test' takes precedence. ↓

fix Use only one of 'name' or 'test' per rule to avoid confusion.

Install

npm install templated-assets-webpack-plugin

yarn add templated-assets-webpack-plugin

pnpm add templated-assets-webpack-plugin

Imports

TemplatedAssetsWebpackPlugin

wrong

import TemplatedAssetsWebpackPlugin from 'templated-assets-webpack-plugin';

correct

const TemplatedAssetsWebpackPlugin = require('templated-assets-webpack-plugin');

CJS only; package does not expose ESM. Use require() for all versions.

default

wrong

const { TemplatedAssetsWebpackPlugin } = require('templated-assets-webpack-plugin');

correct

const TemplatedAssetsWebpackPlugin = require('templated-assets-webpack-plugin');

Default export is the constructor. Named destructuring is incorrect.

rules

wrong

new TemplatedAssetsWebpackPlugin({ rule: [...] })

correct

new TemplatedAssetsWebpackPlugin({ rules: [...] })

Configuration key is 'rules', not 'rule'. Singular spelling is a common mistake.

Quickstart

Minimal webpack config using TemplatedAssetsWebpackPlugin to generate partial views for server-rendered assets.

const path = require('path');
const TemplatedAssetsWebpackPlugin = require('templated-assets-webpack-plugin');

module.exports = {
  entry: { app: './index.js' },
  output: { filename: '[name].[contenthash].js', publicPath: '' },
  plugins: [
    new TemplatedAssetsWebpackPlugin({
      rules: [
        { name: ['app', 'vendors'] },
        { name: 'runtime', output: { inline: true } }
      ]
    })
  ],
  optimization: {
    runtimeChunk: 'single',
    splitChunks: { cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } }
  }
};