es6-template-string-loader

A Webpack loader that turns text file to an es6 template string

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
es6-template-string-loader
502.0.07 years ago9 years agoMinified + gzip package size for es6-template-string-loader in KB

Readme

Why

I am a fan of the css-modules, but it is not so easy to use it together with Angular.
This loader, together with babel-loader, makes it fairly easy to do that. There are certainly other use cases for this loader too.

Usage

npm install --save-dev es6-template-string-loader

Add the following to Webpack's config file:
loaders: [
  { test: /\.css$/, loader: "style!css?modules" },
  { test: /\.html$/, loader: "babel!es6-template-string" }
]

In CSS file, foo.css
.foo {
  color: blue;
}

In HTML template, foo.html
<div class="${this.foo}"></div>

In the JS file that define the directive, foo.js
import styles from "foo.css";
import template from "foo.html";

ngApp.directive("foo", function() {
  return {
    scope: {},
    restrict: 'E',
    template: template(styles)
    controller: function() {

    }
  };
});

Or, if you don't like to use this, then you can specify a different name by using context parameter
loaders: [
  { test: /\.css$/, loader: "style!css?modules" },
  { test: /\.html$/, loader: "babel!es6-template-string?context=styles" }
]

Then, you would be able to use styles in the HTML template
<div class="${styles.foo}"></div>

If you use babel 6, make sure to add the required loaders params, like this:
loaders: [
  { test: /\.css$/, loader: "style!css?modules" },
  { test: /\.html$/, loader: "babel?presets[]=es2015!es6-template-string" }
]