\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 Loader\n \n
\n Webpack loader to render Pug templates
\n\n \n \n \n \n ![](\"img/picture.58b43bd8.png\")
\n \n\n```\n\nIf the `entry` plugin option is a path, the plugin finds all templates automatically\nand keep the same directory structure in the output directory.\n\nIf the `entry` plugin option is an object, the key is an output filename without `.html` extension and the value is a template file.\n\nVery simple and clear **webpack.config.js**, all relevant settings are in one place, in plugin options:\n\n```js\nconst path = require('path');\nconst PugPlugin = require('pug-plugin');\n\nmodule.exports = {\n output: {\n path: path.join(__dirname, 'dist/'),\n },\n\n plugins: [\n new PugPlugin({\n // automatically processing all templates in the path\n entry: 'src/views/',\n // - OR - define many pages manually (key is output filename w/o `.html`)\n entry: {\n // simple page config w/o variables\n index: 'src/views/home.pug', // => dist/index.html\n // advanced page config with variables\n 'news/sport': { // => dist/news/sport.html\n import: 'src/views/news/sport/index.pug', // template file\n data: { title: 'Sport news' }, // pass variables into template\n },\n },\n data: {...}, // pass global data into all templates\n js: {\n // JS output filename, used if `inline` option is false (defaults)\n filename: 'js/[name].[contenthash:8].js',\n //inline: true, // inlines JS into HTML\n },\n css: {\n // CSS output filename, used if `inline` option is false (defaults)\n filename: 'css/[name].[contenthash:8].css',\n //inline: true, // inlines CSS into HTML\n },\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> **Note**\n> \n> No additional plugins or loader required.\n\n\n### Using with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n\n> **Warning**\n>\n> This way is not recommended!\n\nInstall the `@webdiscus/pug-loader` only if you use the `html-webpack-plugin`.\n\n```\nnpm install @webdiscus/pug-loader html-webpack-plugin --save-dev\n```\n\nInstall additional packages for styles:\n\n```\nnpm install css-loader sass-loader sass --save-dev\n```\n\nInstall additional plugin to extract CSS:\n\n```\nnpm install mini-css-extract-plugin --save-dev\n```\n\nUsing the `html-webpack-plugin` you should require a source asset file in the Pug template. \n\nFor example, there is the template ./src/views/home.pug:\n\n```pug\nhtml\n head\n //- variable from plugin options, very ugly access\n title= htmlWebpackPlugin.options.data.title\n //- relative path to favicon source file\n link(href=require(\"./favicon.ico\") rel=\"icon\")\n //- JS and CSS will be injected into HTML automatically, anywhere here\n //- Note: you have no control over the position or order of injected files\n body\n h1 Home\n //- relative path to image source file\n img(src=require(\"./picture.png\"))\n```\n\nVery complex **webpack.config.js**:\n\n```js\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n output: {\n path: path.join(__dirname, 'dist/'),\n // JS output filename must be defined only here\n filename: 'js/[name].[contenthash:8].js',\n },\n\n entry: {\n // Source files of styles and scripts must be defined here, separately from their templates.\n // How to bind each generated bundle to the HTML page?\n // Answer: using the `chunks` plugin option.\n index: ['./src/views/home/main.js', './src/views/home/style.scss'],\n 'news/sport': ['./src/views/news/sport/main.js', './src/views/news/sportstyle.scss'],\n },\n\n plugins: [\n // For one page must be initialized the plugin instance.\n new HtmlWebpackPlugin({\n template: path.join(__dirname, 'src/views/home/index.pug'),\n // HTML output filename\n filename: 'index.html',\n // bind the generated JS and CSS files to this template via chunks,\n // this is a very terrible \"crutch\"\n chunks: ['index'],\n // pass variables into template,\n // access in template is very ugly: `htmlWebpackPlugin.options.data.title`\n data: { title: 'Home' }\n }),\n\n // For other page must be initialized yet one plugin instance.\n // It's very very bad practice and ugly syntax!\n new HtmlWebpackPlugin({\n template: path.join(__dirname, 'src/views/news/sport/index.pug'),\n // HTML output filename\n filename: 'news/sport.html',\n // bind the generated JS and CSS files to this template via chunks option,\n // you're not confused yet using chunks?\n chunks: ['news/sport'],\n // access in template is very ugly: `htmlWebpackPlugin.options.data.title`,\n // using `pug-plugin`, the variable in Pug is accessible w/o any scope: `title` \n // (of cause, in `pug-plugin` you can define a variable scope, if you want)\n data: { title: 'Sport news' }\n }),\n \n // ... Do you have the joy of adding yet one page using the HtmlWebpackPlugin?\n // No? Then try to use the `pug-plugin`.\n\n // Yet one plugin to extract CSS and inject one into HTML.\n new MiniCssExtractPlugin({\n // CSS output filename defined in another place, here\n filename: 'css/[name].[contenthash:8].css',\n }),\n ],\n\n module: {\n rules: [\n // requires to define the pug loader\n {\n test: /\\.pug$/,\n loader: '@webdiscus/pug-loader',\n },\n {\n test: /\\.(s?css|sass)$/,\n // requires additional MiniCssExtractPlugin loader\n use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],\n },\n {\n test: /\\.(png|jpe?g|ico)/,\n type: 'asset/resource',\n generator: {\n filename: 'img/[name].[hash:8][ext]',\n },\n },\n ],\n },\n};\n```\n\nWhy do many developers switch from Webpack to other bundlers?\nOne of the reasons they cite is the complex configuration many different plugins and loaders for one simple thing - rendering an HTML page with assets.\n\nThe [pug-plugin](https://github.com/webdiscus/pug-plugin) \"changes the rule of the game\".\nJust one plugin replaces the functionality of many [plugins and loaders](https://github.com/webdiscus/html-bundler-webpack-plugin#list-of-plugins) and makes configuration very simple and clear.\n\n### Using in JavaScript\n\nA Pug template can be used in JavaScript code as template function with custom data.\n\nInstall the `pug-loader`.\n\n```\nnpm install @webdiscus/pug-loader --save-dev\n```\n\nChange your **webpack.config.js** according to the following minimal configuration:\n\n```js\nconst path = require('path');\n\nmodule.exports = {\n output: {\n path: path.join(__dirname, 'public/'),\n publicPath: '/', // must be defined any path, `auto` is not supported yet\n },\n entry: {\n index: './src/index.js', // load a Pug template in JS\n },\n module: {\n rules: [\n {\n test: /\\.pug$/,\n loader: '@webdiscus/pug-loader',\n },\n ],\n },\n};\n```\n\nLoad a Pug template in JavaScript. Optional you can pass any data into generated template function.\n\n**./src/index.js**\n\n```js\nconst tmpl = require('template.pug');\nconst html = tmpl({\n myVar: 'value',\n});\n```\n\n---\n\n\n## Original options\n\n[See original description of options](https://pugjs.org/api/reference.html#options)\n\n### `basedir`\n\nType: `string` Default: `/`