blaze templates loader for meteor-webpack

Usage no npm install needed!

<script type="module">
  import settlinSpacebarsLoader from 'https://cdn.skypack.dev/@settlin/spacebars-loader';



Inspired from https://github.com/xamfoo/spacebars-loader A plugin for webpack to compile Spacebars templates for running on a Meteor platform. It can be used with https://github.com/ardatan/meteor-webpack to use blaze templates.


meteor npm install spacebars-loader --save-dev
meteor remove blaze-html-templates aldeed:template-extension spacebars-compiler standard-app-packages
meteor add spacebars blaze underscore

Basically, since ardatan:meteor-webpack is itself a registered as an html compiler, we can not use the blaze-html-templates package, which is dependent on the compiler templating. Instead we ask webpack to use this loader and compile the templates into required Template.<name>.



module.exports = {
  module: {
    loaders: [
        test: /\.html$/,
        loader: 'spacebars-loader'

Initialize Template

Since we are not using templating, we do not have direct access to Template. We can enable this by doing,

window.Template = Blaze.Template;

as the very first line of our client entry file.

That's it. Now all your templates should work.

Extra (Optional) Usage

Query options

  • attachGlobal (default=true)
    • Don't attach template to Template object if false
    • Example: spacebars-loader?attachGlobal=false


The loader compiles a Spacebars template

<template name='myTemplate'>
    <h1>My Template</h1>

to a Meteor compatible output:

module.exports.template = new Blaze.Template("Template.myTemplate", (function () {
  var view = this; return HTML.DIV("\n    ", HTML.H1("My Template"), "\n  ");
Blaze.Template["myTemplate"] = module.exports.template;

The exports allow you to use it in a JS file like this:

import {template} from './myTemplate.html';

template.onCreated(function () {
  console.log('Created a template!');