Install the plugin with npm:
$ npm install html-webpack-pug-plugin --save-devRequire the plugin in your webpack config:
var HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');ES2015
import HtmlWebpackPugPlugin from 'html-webpack-pug-plugin';
Add the plugin to your webpack config as follows:
plugins: [
new HtmlWebpackPlugin({
filetype: 'pug'
}),
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: 'test.pug',
filetype: 'pug'
}),
new HtmlWebpackPlugin({
template: 'src/views/_test.slim',
filename: 'test.slim',
filetype: 'slim'
}),
new HtmlWebpackPlugin({
template: 'src/views/_test.haml',
filename: 'test.haml',
filetype: 'haml'
}),
new HtmlWebpackPugPlugin()
] Pug/Jade
doctype html
html
head
meta(charset="utf-8")
link(href="bundle.css" rel="stylesheet")
body
script(type="text/javascript" src="bundle.js")Slim
doctype html
html
head
meta charset="utf-8"
link href="bundle.css" rel="stylesheet"
body
script type="text/javascript" src="bundle.js"Haml
!!! 5
%html
%head
%meta{ :charset => "utf-8" }
%link{ :href => "bundle.css", :rel => "stylesheet"}
%body
%script{ :src => "bundle.js" }This project is licensed under MIT.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent