\n \n ![](\"https://cdn.rawgit.com/pugjs/pug-logo/eec436cee8fd9d1726d7839cbe99d1f694692c0c/SVG/pug-final-logo-_-colour-128.svg\")
\n \n \n ![](\"https://webpack.js.org/assets/icon-square-big.svg\")
\n \n
\n Pug Plugin for Webpack\n
\n The plugin renders Pug templates with referenced source asset files into HTML
\n\n \n \n \n \n ![](\"img/picture1.58b43bd8.png\")
\n ![](\"img/picture2.bd858b43.png\")
\n \n\n```\n\n\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\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\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\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 >= 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', // <= enable using Pug templating engine\n }),\n ],\n};\n```\n\n> The heart of `pug-plugin` now beats in the `html-bundler-webpack-plugin`.\n> \n> `@webdiscus/pug-loader` -> `pug-plugin` -> `html-bundler-webpack-plugin` -> `pug-plugin`\n> \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","readmeFilename":"README.md"}