Handlebars to HTML pages loader for Webpack
Webpack loader for create HTML pages from Handlebars templates.
The plugin is inspired by Foundation's Panini.
Installation
The plugin requires your application to be installed Webpack 5 and Handlebars 4.
You can install the package as follows:
npm install @sumotto/handlebars-to-html-pages-webpack-loader --save-dev
# or
yarn add @sumotto/handlebars-to-html-pages-webpack-loader --dev
Usage
Add the loader to your webpack configuration's:
Simple loader
const { join } = require( 'path' );
const src = join( __dirname, 'src' );
module.exports = {
module: {
rules: [
{
test: /\.hbs$/,
use: [
'html-loader', // Or something else to link hbs text to JS
{
loader: '@sumotto/handlebars-to-html-pages-webpack-loader',
options: {
// Paths to the corresponding folders, can be either a string or an array of absolute or relative paths.
layoutsPaths: join( src, 'layouts' ), // by 'layouts'
partialsPaths: [ join( src, 'partials' ), join( src, 'blocks' ) ], // by default 'partials'
helpersPaths: join( src, 'helpers' ), // by default 'helpers'
contextsPaths: join( src, 'contexts' ), // by default 'contexts'
// The path to the pages needs to get the pageName right, for example: 'sub-page/some-page'
pagesFolderPaths: join( src, 'pages' ), // by default 'pages'
// Used to determine relative paths.
root: src, // by default loaderContext.rootContext
// If you need to, you can set the default context.
defaultContext: {
key: 'value',
}, // by default {}
//Outputs to the console information about all registered helpers, partials and contexts.
debug: true, // by default false
}
},
],
}
]
},
};
With Assets Resources
module.exports = {
module: {
rules: [
{
test: /\.hbs$/,
type: 'asset/resource',
generator: {
filename: ( pathData ) => {
return relative( pages, pathData.filename ).replace( /\.hbs$/, '.html' );
},
},
},
{
test: /\.hbs$/,
use: [
'@sumotto/handlebars-to-html-pages-webpack-loader'
],
}
]
},
}
With HTML Webpack plugin
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
const src = join( __dirname, 'src' );
module.exports = {
module: {
rules: [
{
test: /\.hbs$/,
use: [
'html-loader',
'@sumotto/handlebars-to-html-pages-webpack-loader'
],
}
]
},
plugins: [
new HtmlWebpackPlugin( {
page: 'index.html',
template: join( src, 'pages', 'index.hbs' ),
} ),
new HtmlWebpackPlugin( {
page: 'sub-page/some-page.html',
template: join( src, 'pages', 'sub-page/some-page.hbs' ),
} ),
],
}
License
MIT License