Skip to content

negibouze/html-webpack-pug-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Pug/Jade extension for the HTML Webpack Plugin

Resources

License

Stars

Watchers

Forks

Packages

No packages published