{"id":20608,"library":"templated-assets-webpack-plugin","title":"TemplatedAssetsWebpackPlugin","description":"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.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/jouni-kantola/templated-assets-webpack-plugin","tags":["javascript","webpack","template","assets","inline","ssr"],"install":[{"cmd":"npm install templated-assets-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add templated-assets-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add templated-assets-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for plugin integration; v4 requires webpack 5+, v3 requires webpack 2-5.","package":"webpack","optional":false}],"imports":[{"note":"CJS only; package does not expose ESM. Use require() for all versions.","wrong":"import TemplatedAssetsWebpackPlugin from 'templated-assets-webpack-plugin';","symbol":"TemplatedAssetsWebpackPlugin","correct":"const TemplatedAssetsWebpackPlugin = require('templated-assets-webpack-plugin');"},{"note":"Default export is the constructor. Named destructuring is incorrect.","wrong":"const { TemplatedAssetsWebpackPlugin } = require('templated-assets-webpack-plugin');","symbol":"default","correct":"const TemplatedAssetsWebpackPlugin = require('templated-assets-webpack-plugin');"},{"note":"Configuration key is 'rules', not 'rule'. Singular spelling is a common mistake.","wrong":"new TemplatedAssetsWebpackPlugin({ rule: [...] })","symbol":"rules","correct":"new TemplatedAssetsWebpackPlugin({ rules: [...] })"}],"quickstart":{"code":"const path = require('path');\nconst TemplatedAssetsWebpackPlugin = require('templated-assets-webpack-plugin');\n\nmodule.exports = {\n  entry: { app: './index.js' },\n  output: { filename: '[name].[contenthash].js', publicPath: '' },\n  plugins: [\n    new TemplatedAssetsWebpackPlugin({\n      rules: [\n        { name: ['app', 'vendors'] },\n        { name: 'runtime', output: { inline: true } }\n      ]\n    })\n  ],\n  optimization: {\n    runtimeChunk: 'single',\n    splitChunks: { cacheGroups: { defaultVendors: { test: /[\\\\/]node_modules[\\\\/]/, name: 'vendors', chunks: 'all' } } }\n  }\n};","lang":"javascript","description":"Minimal webpack config using TemplatedAssetsWebpackPlugin to generate partial views for server-rendered assets."},"warnings":[{"fix":"Upgrade to webpack v5+, or use templated-assets-webpack-plugin@v3 for webpack v2-4.","message":"Dropped support for webpack v2-4 in v4.0.0","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"If you rely on absolute paths (/), set webpack output.publicPath explicitly.","message":"In v3.0.0, default publicPath behavior changed: unconfigured publicPath now generates paths without leading slash.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use require() instead of import statements. For ESM projects, use createRequire or transpile.","message":"Plugin does not export ES modules; CJS only.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use rules: [...] in the plugin options object.","message":"Configuration key is 'rules', not 'rule'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use only one of 'name' or 'test' per rule to avoid confusion.","message":"When using 'test' and 'name' together, 'test' takes precedence.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install templated-assets-webpack-plugin --save-dev' or check node_modules path.","cause":"Package not installed or running in wrong directory.","error":"Error: Cannot find module 'templated-assets-webpack-plugin'"},{"fix":"Use require('templated-assets-webpack-plugin') instead of import.","cause":"Using default import syntax with CJS package.","error":"TypeError: TemplatedAssetsWebpackPlugin is not a constructor"},{"fix":"Ensure each rule's 'name' is a string or array of strings.","cause":"Providing a single string as 'name' is fine, but other types (e.g., object) cause this error.","error":"Error: Template rule 'name' must be a string or array of strings"},{"fix":"Upgrade to templated-assets-webpack-plugin@v3 or v4 for webpack v5 support.","cause":"Plugin version incompatible with webpack v5 (using v1 or v2).","error":"webpack v5: Compilation.hooks.processAssets is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}