{"id":27380,"library":"script-ext-html-webpack-plugin","title":"script-ext-html-webpack-plugin","description":"Extends html-webpack-plugin to add async, defer, type=\"module\", inline, and custom attributes to script elements, plus resource hints (preload/prefetch). Last version 2.1.5 works with webpack 4 and html-webpack-plugin 4.x. No longer maintained; does not support webpack 5. For webpack 5, consider alternatives like html-webpack-plugin's own script loading options or other plugins. Release cadence was irregular; now abandoned.","status":"deprecated","version":"2.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/numical/script-ext-html-webpack-plugin","tags":["javascript","webpack","plugin","html-webpack-plugin","async","defer","inline","script","module"],"install":[{"cmd":"npm install script-ext-html-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add script-ext-html-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add script-ext-html-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; this plugin modifies its output.","package":"html-webpack-plugin","optional":false},{"reason":"Peer dependency; plugin operates within webpack compilation.","package":"webpack","optional":false}],"imports":[{"note":"ESM import works; CommonJS require also works but default import is preferred in modern codebases.","wrong":"const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')","symbol":"default","correct":"import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'"},{"note":"This is a default export; named destructuring does not work.","wrong":"const { ScriptExtHtmlWebpackPlugin } = require('script-ext-html-webpack-plugin')","symbol":"ScriptExtHtmlWebpackPlugin","correct":"const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')"},{"note":"html-webpack-plugin also uses default export; ensure correct import style.","wrong":"const HtmlWebpackPlugin = require('html-webpack-plugin').default","symbol":"HtmlWebpackPlugin","correct":"import HtmlWebpackPlugin from 'html-webpack-plugin'"}],"quickstart":{"code":"const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: 'bundle.js'\n  },\n  plugins: [\n    new HtmlWebpackPlugin({ title: 'My App' }),\n    new ScriptExtHtmlWebpackPlugin({\n      defaultAttribute: 'defer', // all scripts get defer\n      inline: /inline.*\\.js$/,   // inline scripts matching pattern\n      prefetch: /lazy\\.chunk\\.js$/, // prefetch certain chunks\n      preload: /initial.*\\.js$/, // preload initial scripts\n      module: /module.*\\.js$/   // add type=\"module\"\n    })\n  ]\n};","lang":"javascript","description":"Webpack config using ScriptExtHtmlWebpackPlugin to set async/defer attributes, inline scripts, and add resource hints."},"warnings":[{"fix":"Migrate to webpack 5 native features or alternative plugins (e.g., html-webpack-plugin's built-in script loading).","message":"This project is no longer maintained and does not support webpack 5.","severity":"deprecated","affected_versions":">= 2.1.5"},{"fix":"Upgrade html-webpack-plugin to v3.0.6+ or v4.x.","message":"Requires html-webpack-plugin v3.0.6+ or v4.x; older versions are incompatible.","severity":"breaking","affected_versions":">= 2.0.0"},{"fix":"Check plugin order; place ScriptExtHtmlWebpackPlugin last or after other script-modifying plugins.","message":"The plugin may conflict with other plugins that modify script tags (e.g., inline-source).","severity":"gotcha","affected_versions":">= 1.0.0"},{"fix":"Use html-webpack-plugin v4+ with webpack 4.","message":"Webpack 4 requires html-webpack-plugin v4+; earlier combinations may fail.","severity":"breaking","affected_versions":">= 2.0.0"},{"fix":"Ensure the script source is a chunk or asset that can be inlined (no crossorigin or integrity attributes).","message":"The `inline` option only works for scripts that are not external or already inlined by other plugins.","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":"Place HtmlWebpackPlugin before ScriptExtHtmlWebpackPlugin in the plugins array.","cause":"HtmlWebpackPlugin is not instantiated before ScriptExtHtmlWebpackPlugin in the plugins array.","error":"Uncaught Error: ScriptExtHtmlWebpackPlugin: you must configure html-webpack-plugin first"},{"fix":"Use the default import: `import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'` or `const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')`.","cause":"Using named import instead of default import.","error":"ScriptExtHtmlWebpackPlugin is not a constructor"},{"fix":"Run `npm install --save-dev html-webpack-plugin`.","cause":"html-webpack-plugin is not installed as a dependency.","error":"Cannot find module 'html-webpack-plugin'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}