html-webpack-pug-plugin

Pug/Jade extension for the HTML Webpack Plugin

Notice

Slim and Haml are not supported since version0.1.0.
If you are using this package with Slim or Haml, please change to these packages.

Slim: html-webpack-slim-plugin
Haml: html-webpack-haml-plugin

Installation

Install the plugin with npm:

$ npm install --save-dev html-webpack-pug-plugin

Install the plugin with yarn:

$ yarn add --dev html-webpack-pug-plugin

Usage

Require the plugin in your webpack config:

var HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');

ES2015 or later

import HtmlWebpackPugPlugin from 'html-webpack-pug-plugin';

Add the plugin to your webpack config as follows:

// Please specify filename '*.pug'.
plugins: [
  new HtmlWebpackPlugin({
    filename: 'output.pug',
    minify: false
  }),
  new HtmlWebpackPugPlugin()
]  

Even if you generate multiple files make sure that you add the HtmlWebpackPugPlugin only once:

plugins: [
  new HtmlWebpackPlugin({
    template: 'src/views/test.pug',
    filename: 'output.pug',
    minify: false
  }),
  new HtmlWebpackPlugin({
    template: 'src/views/test.pug',
    filename: 'test.pug',
    minify: false
  }),
  new HtmlWebpackPugPlugin()
]  

Options

Name	Type	Default	Description
ast	{Boolean}	false	if true it uses ast (pug-source-gen is used, but sometimes it does not work well because it is not maintained).
adjustIndent	{Boolean}	false	if true the indent will be adjusted automatically (sometimes it does not work well).

Caution: It is recommended to avoid using AST mode as much as possible, as some required packages are old and vulnerable.

Here's an example webpack config illustrating how to use these options

webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'template.pug',
      filename: 'index.pug',
      minify: false
    }),
    new HtmlWebpackPugPlugin({
      adjustIndent: true
    })
  ]
}

Output Example

Pug/Jade

doctype html
html
  head
    meta(charset="utf-8")
    link(href="styles.css" rel="stylesheet")
  body
    script(src="bundle.js")

If you are interested, look at examples.

License

This project is licensed under MIT.