Assemble-webpack-handlebars NPM

🔩 🛠 assemble-webpack-handlebars

Webpack Loader + Plugin for compiling Handlebars using Assemble.io

Generates HTML pages using Handlebars templating and Assemble's power.

This plugin is compatible with updated version of webpack(4.0.0+) and sass.

Install

npm install --save-dev assemble-webpack-handlebars

Usage

const assembleWebpack = require('assemble-webpack-handlebars');
const handlebarsHelpers = require('handlebars-helpers');

module.exports = {
  // webpack configurations
  module: {
    rules: [
      {
        test: /\.(hbs)$/,
        use: [
          {
            loader: 'assemble-webpack-handlebars'
          }
        ]
      }
    ]
  },

  plugins: [
    new assembleWebpack.AttachedPlugin({
      baseLayout: ['./src/app/layouts/**/*.hbs'],
      basePages: ['./src/app/pages/**/*.hbs'],
      partialsLayout: ['./src/app/fe-components/**/*.hbs'],
      partialsData: [
        './src/app/fe-components/**/*.json',
        './src/app/layouts/**/*.json',
        './src/app/pages/**/*.json'
      ],
      helpers: [handlebarsHelpers(), './src/app/helpers/custom-helpers.js']
    })
  ]
};

Configuration Options & Details

Name	Type	Description
baseLayout	array	Relative path of Base Layout files considered as Main template. It acts as HTML skeleton and used by the actual basePages.
basePages	array	Relative path of Base Pages. These will generate the Actual HTML files as an output
partialsLayout	array	Relative path of HBS partials. These are smaller re-usable components and can used inside another components or pages
partialsData	array	Relative path of JSON data which will be interpolated in HBS components.
helpers	array	Relative path of custom helpers files

Important Points

assembleWebpack is used as a plugin to provide the required configurations and to compile handlebar files using assembler.io during Webpack build.
We also need assemble-webpack-handlebars as a loader to compile Handlebars files with extension hbs

Note: Until you link the required resources in your project's dependency graph, Webpack will NOT be able to track it for any changes during Watch mode or while running Webpack-dev-server.

So even though assembleWebpack plugin generates the output during Webpack build, you still need to explicitly import/require the Handlebar resources somewhere in your project so that it can be re-compiled on the respective file changes.