♻️ Instead of using this plugin, a combination of pug-loader and apply-loader produce the same results:
require('apply-loader!pug-loader!./foo.pug')
Webpack loader that compiles pug to static html
Note: This project is in early development, and versioning is a little different. Read this for more details.
This loader is intended to be used in situations where you want webpack to render a static html file rather than a client side template. It's written by the authors of spike, a static website engine with webpack at the core.
If you are looking for a simple, solid, and well maintained webpack loader that renders out pug as html, you have come to the right place.
npm i pug-static-loader -S
Use as usual, passing in any options to options. Locals can go to a locals configuration key. If you were to set up a simple webpack project using this loader, it would look something like this:
// webpack.config.js
module.exports = {
module: {
rules: [{
loader: 'source-loader'
}, {
test: /\.pug$/,
loader: 'pug-static-loader',
options: {
pretty: false,
locals: { foo: 'bar' }
}
}]
}
}The loader returns the raw compiled html, so that it can be further processed by other loaders if necessary. This makes this loader chain-able. However, raw html is also not valid javascript, so if you try to use this loader on its own, you will get a webpack error. We recommend using source-loader to transform the raw source into an exported string so that it can be consumed by webpack.
Now you might also want to extract out the resulting code and write it to an html file, rather than letting it chill in your javascript output, but that's not part of what a loader can do, so use some plugins or maybe spike for this instead.
This loader also exposes the source of the original pug files internally for plugins to access, using the _src property of each webpack module object.
- Details on the license can be found here
- Details on running tests and contributing can be found here