webpack-compile-templates
Webpack version of this.
Compiles underscore templates from HTML script tags into CommonJS in a webpack loader. You can add multiple script tags to each file. Requiring the file will return an object with a property for each script tag. The ID attribute is the key and the compiled template function as the value.
See the underscore documentation for more details.
Usage
Install
npm install --save-dev webpack-compile-templates
Create a template file
myTemplates.html
Use the ID attribute to identify the template from your JS source. Use data-variable-name to change the variable name that is used in the underscore template. obj is the default
Require the template file
A JS file
var $ = ;var templates = ; ;;
Add to webpack
Register the template and tell webpack to look for html extensions
loaders: [
{ test: /\.html$/, loader: 'webpack-compile-templates' },
Why?
The advantage of this transform over other transforms or plugins is that the templates are backwards compatible with non-CommonJS code. Template files formatted this way can also be included directly in HTML. A UMD module that is shared in both a CommonJS and non-commonJS codebase can be used like this:
{ if typeof module !== 'undefined' // CommonJS - templates are precompiled and bundled in with JS var templates = ; ; else // Browser globals. Templates are included in html and need to be compiled client-side var $template1 = ; var $tempalte2 = ;
The commonJS environment gets the benefit of the precompiled template. Other environments can still include the file on the page and access it by ID.