This is for compiling and loading Google Closure Templates (.soy files) into webpack builds. The loader also shims compiled soy, which is normally revealed globally, and instead returns imported soy namespaces as a module to be consume by webpack.
npm i soy-loader --save-dev
Documentation: Google Closure Templates Templates
var templates = require('soy!./templates.soy');
// => returns an object for the template namespace.
webpack.config.js
module.exports = {
// ...
module: {
loaders: [
// ...
{ test: /\.soy$/, loader: 'soy-loader' }
]
}
};
greetings.soy
{namespace greetingTemplates}
/**
* Greet a person.
* @param name the person's first name
*/
{template .hello}
<h1>Hello {{$name}}</h1>
{/template}
app.js
var greetPerson = require('./greetings.soy').hello;
target.innerHTML = greetPerson({ name: 'John' });
// => '<h1>Hello John</h1>'