PugPlugin is used to handle .pug files rendering html content and DON'T HAVE TO be chained with HtmlPlugin, see details bellow. Based on HTMLPlugin of fusebox, see source and doc

npm i --save fusebox-pug-plugin

import {PugPlugin} from "fusebox-pug-plugin";
let fuse = fsbx.FuseBox.init({
    homeDir: "./src",
    outFile: "./bundle.js",
    plugins: [
	    PugPlugin()
    ]
});

const PugPlugin = require("fusebox-pug-plugin").PugPlugin;
let fuse = fsbx.FuseBox.init({
    homeDir: "./src",
    outFile: "./bundle.js",
    plugins: [
	    PugPlugin()
    ]
});

The options availables are specified in IPugPluginOptions interface:

import {PugPlugin,IPugPluginOptions} from "fusebox-pug-plugin";
let pugPluginOptions:IPugPluginOptions = {
   hmr:true,// If true, emitJavascriptHotReload will be invoked after render component
   useDefault:true,//If true, the file could be imported using default export
   pug:{//Any pug option
       pretty:true
   }
}
let fuse = fsbx.FuseBox.init({
    homeDir: "./src",
    outFile: "./bundle.js",
    plugins: [
	    PugPlugin(pugPluginOptions)
    ]
});

You have 2 special macros availables:

Use tilde ( ~ ) to import files from root (homeDir from fuse configuration) Using:

root
 |- folder
 |    |-subfolder
 |		  |- file2.pug
 |-  file.pug 

root/folder/subfolder/file2.pug

include ~/file
//- Is the same as
include ../../file

Use node: to import files from node_modules folder Using:

root
 |- node_modules
 |		 |- module
 |			 |-moduleFile.pug
 |- folder
 |    |-subfolder
 |		  |- file.pug

root/folder/subfolder/file.pug

include node:module/moduleFile
//- Is the same as
include ../../../node_modules/module/moduleFile

• Davinchi Need help / support? Create an issue or contact with us

Pug allows to include and extend from other pug files, when a file is modified, pug doesn't track by default the dependencies, HtmlPlugin by default uses caching to speed up bundling, with the cache if a file included is updated the file included won't be updated. To prevent this, is necessary compile all the pug files with each modification (yes, it's a pity). Exists a tool called pug-inheritance that get all the files that uses another file, fusebox only notifies the file imported in .js/.ts so is not possible use pug-inheritance. For example:

import template from "./myFile.pug"

myFile.pug

include ./_otherFile.pug

_otherFile.pug

//Some content

If pug-inheritane receives _otherFile.pug and is capable of get all the files that use _otherFile.pug, but the file tracked by fusebox is myFile.pug so is not possible to know when _otherFile.pug changes

If you find another way please feel free to contribute :)