Handlebars compiling with WebPack is slow

Question

I'm working on a project which has A LOT of different templates, around ~ 67 at the moment. Every time I make a change in 1 file, Webpack starts recompiling every handlebars template, which makes it very slow.

I'm wondering if there's a way to reduce the workload / optimize the speed.

My Handlebars workflow in Webpack looks like this:

var Handlebars = require('handlebars-webpack-plugin');
....
....
new Handlebars({
        entry: path.join(process.cwd(), "src", "layouts", "default.hbs"),
        output: path.join(process.cwd(), "dist", "form-template.html"),
        data: {title: 'Form template', properties: {partial: 'form-template/index'}},
        partials: [
            path.join(process.cwd(), "src", "partials", "**/*.hbs")
        ]
    }),
new Handlebars({
        entry: path.join(process.cwd(), "src", "layouts", "default.hbs"),
        output: path.join(process.cwd(), "dist", "homepage.html"),
        data: {title: 'Homepage', properties: {partial: 'homepage/index'}},
        partials: [
            path.join(process.cwd(), "src", "partials", "**/*.hbs")
        ]
    }),
new Handlebars({
        entry: path.join(process.cwd(), "src", "layouts", "default.hbs"),
        output: path.join(process.cwd(), "dist", "404.html"),
        data: {title: '404 error', properties: {partial: '404/index'}},
        partials: [
            path.join(process.cwd(), "src", "partials", "**/*.hbs")
        ]
    }),
...
... etc.

Answer 1

Try giving https://github.com/trivago/parallel-webpack a go.

I'd split those arrays into different configs so parallel webpack can run them at the same time

There's also https://www.npmjs.com/package/happypack which might do the trick