{"id":14967568,"url":"https://github.com/webdiscus/pug-plugin","last_synced_at":"2026-03-01T12:02:03.806Z","repository":{"id":37721776,"uuid":"430695557","full_name":"webdiscus/pug-plugin","owner":"webdiscus","description":"Renders Pug template to HTML or template function. Resolves source files of scripts, styles, images in Pug . Uses Pug template as entry point.","archived":false,"fork":false,"pushed_at":"2025-01-28T23:07:58.000Z","size":22637,"stargazers_count":71,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-22T02:51:34.874Z","etag":null,"topics":["entry","entrypoint","html","html-webpack-plugin","javascript","loader","plugin","pug","pug-loader","pug-plugin","render","template","webpack"],"latest_commit_sha":null,"homepage":"https://webdiscus.github.io/pug-plugin/hello-world","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webdiscus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":"biodiscus","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-11-22T12:22:07.000Z","updated_at":"2025-08-14T07:36:03.000Z","dependencies_parsed_at":"2024-02-14T17:51:30.045Z","dependency_job_id":"a3e846bc-8b91-4ed2-a79d-fc902087bf37","html_url":"https://github.com/webdiscus/pug-plugin","commit_stats":{"total_commits":80,"total_committers":3,"mean_commits":"26.666666666666668","dds":"0.025000000000000022","last_synced_commit":"9a78ba11d9fad37a50e8f18247c86ede0f1082c8"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/webdiscus/pug-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdiscus","download_url":"https://codeload.github.com/webdiscus/pug-plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29969243,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T11:43:06.159Z","status":"ssl_error","status_checked_at":"2026-03-01T11:43:03.887Z","response_time":124,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["entry","entrypoint","html","html-webpack-plugin","javascript","loader","plugin","pug","pug-loader","pug-plugin","render","template","webpack"],"created_at":"2024-09-24T13:38:17.101Z","updated_at":"2026-03-01T12:02:03.790Z","avatar_url":"https://github.com/webdiscus.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\n    \u003ca href=\"https://pugjs.org\"\u003e\n      \u003cimg height=\"120\" src=\"https://cdn.rawgit.com/pugjs/pug-logo/eec436cee8fd9d1726d7839cbe99d1f694692c0c/SVG/pug-final-logo-_-colour-128.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n      \u003cimg height=\"120\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n    \u003c/a\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/webdiscus/pug-plugin\"\u003ePug Plugin for Webpack\u003c/a\u003e\n  \u003c/h1\u003e\n  \u003cdiv\u003eThe plugin renders Pug templates with referenced source asset files into HTML\u003c/div\u003e\n\u003c/div\u003e\n\n---\n[![npm](https://img.shields.io/npm/v/pug-plugin?logo=npm\u0026color=brightgreen \"npm package\")](https://www.npmjs.com/package/pug-plugin \"download npm package\")\n[![node](https://img.shields.io/node/v/pug-plugin)](https://nodejs.org)\n[![node](https://img.shields.io/github/package-json/dependency-version/webdiscus/pug-plugin/peer/webpack)](https://webpack.js.org/)\n[![Test](https://github.com/webdiscus/pug-plugin/actions/workflows/test.yml/badge.svg)](https://github.com/webdiscus/pug-plugin/actions/workflows/test.yml)\n[![codecov](https://codecov.io/gh/webdiscus/pug-plugin/branch/master/graph/badge.svg?token=Q6YMEN536M)](https://codecov.io/gh/webdiscus/pug-plugin)\n[![node](https://img.shields.io/npm/dm/pug-plugin)](https://www.npmjs.com/package/pug-plugin)\n\n\n## Pug template as entry point\n\nThe **Pug Plugin** generates static HTML or [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js) from **Pug template** containing source files of scripts, styles, images, fonts and other resources, similar to how it works in [Vite](https://vitejs.dev/guide/#index-html-and-project-root).\nThis plugin allows using a template file as an [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry).\n\nThe plugin resolves source files of assets in templates and replaces them with correct output URLs in the generated HTML.\nThe resolved assets will be processed via Webpack plugins/loaders and placed into the output directory.\nYou can use a relative path or Webpack alias to a source file.\n\nA template imported in JS will be compiled into [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js). You can use the **template function** in JS to render the template with variables in runtime on the client-side in the browser.\n\n## 💡 Highlights\n\n- An [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry) is the Pug template.\n- **Auto processing** multiple templates in the [entry path](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry-path).\n- Allows to specify [`script`](#option-js) and [`style`](https://github.com/webdiscus/html-bundler-webpack-plugin#option-css) **source files** directly in **Pug**:\n  - `link(href=\"./style.scss\" rel=\"stylesheet\")`\n  - `script(src=\"./app.tsx\" defer=\"defer\")`\n- **Resolves** [source files](https://github.com/webdiscus/html-bundler-webpack-plugin#loader-option-sources) in [default attributes](https://github.com/webdiscus/html-bundler-webpack-plugin#loader-option-sources-default) `href` `src` `srcset` etc. using **relative path** or **alias**:\n  - `link(href=\"../images/favicon.svg\" type=\"image/svg\" rel=icon)`\n  - `img(src=\"@images/pic.png\" srcset=\"@images/pic400.png 1x, @images/pic800.png 2x\")`\n- **Inlines** [JS](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-js) and [CSS](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-css) into HTML.\n- **Inlines** [images](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-image) into HTML and CSS.\n- **Compile** the Pug template into [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js) for usage in JS on the client-side.\n- Generates the [preload](https://github.com/webdiscus/html-bundler-webpack-plugin#option-preload) tags for fonts, images, video, scripts, styles, etc.\n- Generates the [integrity](https://github.com/webdiscus/html-bundler-webpack-plugin#option-integrity) attribute in the `link` and `script` tags.\n- Generates the [favicons](https://github.com/webdiscus/html-bundler-webpack-plugin#favicons-bundler-plugin) of different sizes for various platforms.\n- Built-in filters: `:escape` `:code` `:highlight` `:markdown`.\n- You can create **own plugin** using the [Plugin Hooks](https://github.com/webdiscus/html-bundler-webpack-plugin#plugin-hooks-and-callbacks).\n\nSee the [full list of features](https://github.com/webdiscus/html-bundler-webpack-plugin#features).\n\n\n\u003e ‼️ **Note**\n\u003e\n\u003e The `pug-plugin` since version `5.0.0` is essentially the [html-bundler-webpack-plugin](https://github.com/webdiscus/html-bundler-webpack-plugin) under the hood, pre-configured to use [Pug templates](https://github.com/webdiscus/html-bundler-webpack-plugin?#using-template-pug).\n\u003e All [features](https://github.com/webdiscus/html-bundler-webpack-plugin#features) and [options](https://github.com/webdiscus/html-bundler-webpack-plugin?#plugin-options) of [html-bundler-webpack-plugin](https://github.com/webdiscus/html-bundler-webpack-plugin) are now available in `pug-plugin`.\n\n\u003e ⚠️ **Warning**\n\u003e \n\u003e Compared to the version `4.x`, in the new version `5.x` the source asset file can be specified in a template without the `require()` function.\n\u003e For compatibility, the `require()` function is still supported.\n\u003e \n\u003e **OLD syntax**\n\u003e ```pug\n\u003e link(href=require(\"./style.scss\") rel=\"stylesheet\")\n\u003e ```\n\u003e The asset path is _relative to the **partial template**_ or can be as the webpack alias.\n\u003e \n\u003e **NEW syntax**\n\u003e ```pug\n\u003e link(href=\"./style.scss\" rel=\"stylesheet\")\n\u003e ```\n\u003e The asset path is _relative to the **entry template**_ or can be as the webpack alias.\n\u003e \n\u003e See the full list of the [BREAKING CHANGES in v5](https://github.com/webdiscus/pug-plugin/blob/master/CHANGELOG.md#500-2024-02-08).\n\n---\n\n### 📋 [Table of Contents](https://github.com/webdiscus/html-bundler-webpack-plugin#contents)\n\n### ⚙️ [Pug Plugin options](#options)\n\n### 📜 [History of Pug Plugin](#history-pug-plugin)\n\n---\n\n## Install and Quick start\n\nInstall the `pug-plugin`:\n```bash\nnpm install pug-plugin --save-dev\n```\n\nInstall additional packages for styles:\n```bash\nnpm install css-loader sass sass-loader --save-dev\n```\n\nFor example, there is the Pug template with source asset files _./src/views/index.pug_:\n```pug\nhtml\n  head\n    //- relative path to SCSS source file\n    link(href=\"../scss/style.scss\" rel=\"stylesheet\")\n    //- relative path to TypeScript source file\n    script(src=\"../app/main.js\" defer=\"defer\")\n  body\n    h1 Hello World!\n    //- relative path to image source file\n    img(src=\"../assets/images/picture1.png\")\n    //- Webpack alias as path (src/assets/images/) to image source file\n    img(src=\"@images/picture2.png\")\n```\n\nThe minimal webpack config:\n\n```js\nconst PugPlugin = require('pug-plugin');\n\nmodule.exports = {\n  plugins: [\n    new PugPlugin({\n      entry: {\n        // define many page templates here\n        index: 'src/views/index.pug', // =\u003e dist/index.html\n      },\n      js: {\n        // JS output filename\n        filename: 'js/[name].[contenthash:8].js',\n      },\n      css: {\n        // CSS output filename\n        filename: 'css/[name].[contenthash:8].css',\n      },\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.(s?css|sass)$/,\n        use: ['css-loader', 'sass-loader'],\n      },\n      {\n        test: /\\.(ico|png|jp?g|webp|svg)$/,\n        type: 'asset/resource',\n        generator: {\n          filename: 'img/[name].[hash:8][ext][query]',\n        },\n      },\n    ],\n  },\n};\n```\n\n\u003e **Warning**\n\u003e \n\u003e No additional pug or html loaders required.\n\n\nThe generated HTML contains URLs of the output filenames:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink href=\"css/style.05e4dd86.css\" rel=\"stylesheet\" /\u003e\n    \u003cscript src=\"js/main.f4b855d8.js\" defer=\"defer\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eHello World!\u003c/h1\u003e\n    \u003cimg src=\"img/picture1.58b43bd8.png\" /\u003e\n    \u003cimg src=\"img/picture2.bd858b43.png\" /\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003ca id=\"options\" name=\"options\"\u003e\u003c/a\u003e\n\n## Pug Plugin options\n\nThe Pug plugin has all the [options](https://github.com/webdiscus/html-bundler-webpack-plugin?#plugin-options) of the `HTML Bundler Plugin`, plus a few options specific to Pug plugin.\n\n\u003ca id=\"option-pretty\" name=\"option-pretty\"\u003e\u003c/a\u003e\n### `pretty`\n\nType: `'auto'|boolean|Object` Default: `false`\n\nThe Pug compiler generate minimized HTML.\nFor formatting generated HTML is used the [js-beautify](https://github.com/beautifier/js-beautify) with the following `default options`:\n\n```js\n{\n  html: {\n    indent_size: 2,\n    end_with_newline: true,\n    indent_inner_html: true,\n    preserve_newlines: true,\n    max_preserve_newlines: 0,\n    wrap_line_length: 120,\n    extra_liners: [],\n    space_before_conditional: true,\n    js: {\n      end_with_newline: false,\n      preserve_newlines: true,\n      max_preserve_newlines: 2,\n      space_after_anon_function: true,\n    },\n    css: {\n      end_with_newline: false,\n      preserve_newlines: false,\n      newline_between_rules: false,\n    },\n  },\n}\n```\n\nPossible values:\n\n- `false` - disable formatting\n- `true` - enable formatting with default options\n- `'auto'` - in `development` mode enable formatting with default options, in `production` mode disable formatting,\n  use [prettyOptions](#option-pretty-options) to customize options\n- `{}` - enable formatting with custom options, this object are merged with `default options`\\\n  see [options reference](https://github.com/beautifier/js-beautify#options)\n\n  \n\u003ca id=\"option-pretty-options\" name=\"option-pretty-options\"\u003e\u003c/a\u003e\n### `prettyOptions`\n\nType: `Object` Default: `null`\n\nWhen the [pretty](#option-pretty) option is set to `auto` or `true`, you can configure minification options using the `prettyOptions`.\n\n\u003ca id=\"history-pug-plugin\" name=\"history-pug-plugin\"\u003e\u003c/a\u003e\n\n---\n## History of Pug Plugin\n\n**Why the Pug Plugin since `v5.0` based on [html-bundler-webpack-plugin][html-bundler-webpack-plugin]?**\n\n**2021**\\\nThe history of the creation of the `pug-plugin` began back in October 2021.\nIn late 2021 I implemented the [@webdiscus/pug-loader][pug-loader] as а replacement for [pug-loader](https://github.com/pugjs/pug-loader) because `pug-loader` was outdated and had many issues.\n\n**2022**\\\nUntil 2022 `html-webpack-plugin` had no alternative.\nUsing `html-webpack-plugin` caused me pain and suffering to configure webpack for rendering Pug templates containing various assets.\nIn early 2022, I started developing the `pug-plugin` as a complete replacement for `html-webpack-plugin` and many other _\"crutches\"_.\nDuring the year, the `pug-plugin` has gained a lot of useful features and was able to replace the `html-webpack-plugin`, `mini-css-extract-plugin` and many other [plugins and loaders](https://github.com/webdiscus/html-bundler-webpack-plugin?tab=readme-ov-file#list-of-plugins).\n\n**2023**\\\nBased on the `pug-plugin` code I decided to develop a universal [html-bundler-webpack-plugin][html-bundler-webpack-plugin] that would support all the most popular template engines, such as [Eta](https://eta.js.org), [EJS](https://ejs.co), [Handlebars](https://handlebarsjs.com), [Nunjucks](https://mozilla.github.io/nunjucks/), [Pug](https://pugjs.org/), [TwigJS](https://github.com/twigjs/twig.js), and would be [extendable](https://github.com/webdiscus/html-bundler-webpack-plugin#custom-templating-engine) for other template engines, e.g., [LiquidJS](https://github.com/webdiscus/html-bundler-webpack-plugin#using-the-liquidjs).\nDuring the year, this plugin has gained even more [useful features](https://github.com/webdiscus/html-bundler-webpack-plugin#features) and absorbed all the functionality of the `pug-plugin` and the `@webdiscus/pug-loader`.\n\n**2024**\\\nIn early 2024, the `pug-plugin` completely switched to the universal code of `html-bundler-webpack-plugin`.\nStarting from version `5.0`, the `pug-plugin` is the `html-bundler-webpack-plugin` unter the hood, [pre-configured for Pug templates](https://github.com/webdiscus/html-bundler-webpack-plugin#using-template-pug) with the pre-installed `pug` package.\n\nThe config of `pug-plugin \u003e= v5.0`:\n\n```js\nconst PugPlugin = require('pug-plugin');\n\nmodule.exports = {\n  plugins: [\n    new PugPlugin({\n      entry: {\n        index: 'src/views/home.pug',\n      },\n    }),\n  ],\n};\n```\n\nThe above configuration is equivalent to:\n\n```js\nconst HtmlBundlerPlugin = require('html-bundler-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new HtmlBundlerPlugin({\n      entry: {\n        index: 'src/views/home.pug',\n      },\n      preprocessor: 'pug', // \u003c= enable using Pug templating engine\n    }),\n  ],\n};\n```\n\n\u003e The heart of `pug-plugin` now beats in the `html-bundler-webpack-plugin`.\n\u003e \n\u003e `@webdiscus/pug-loader` -\u003e `pug-plugin` -\u003e `html-bundler-webpack-plugin` -\u003e `pug-plugin`\n\u003e \n\n## Also See\n\n- [ansis][ansis] - The Node.js library for ANSI color styling of text in terminal\n- [pug-loader][pug-loader] - The Pug loader for webpack\n- [html-bundler-webpack-plugin][html-bundler-webpack-plugin] - Generates HTML with JS and CSS from [various templates](https://github.com/webdiscus/html-bundler-webpack-plugin#template-engine) containing source files of scripts, styles and other assets.\n  Advanced alternative to [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) and modern replacement of many [plugins and loaders](#list-of-plugins).\n## License\n\n[ISC](https://github.com/webdiscus/pug-loader/blob/master/LICENSE)\n\n[ansis]: https://github.com/webdiscus/ansis\n[pug-loader]: https://github.com/webdiscus/pug-loader\n[pug-filter-highlight]: https://webdiscus.github.io/pug-loader/pug-filters/highlight.html\n[pug-filter-markdown]: https://webdiscus.github.io/pug-loader/pug-filters/markdown.html\n[html-bundler-webpack-plugin]: https://github.com/webdiscus/html-bundler-webpack-plugin\n","funding_links":["https://patreon.com/biodiscus"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdiscus%2Fpug-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdiscus%2Fpug-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdiscus%2Fpug-plugin/lists"}