Giter Club home page Giter Club logo

html-tpl-loader's Introduction

Lodash html template for webpack

Build Status Dependency Status

Combination of the html-loader and the underscore-loader for webpack. Uses the _.template function to extract assets.

Installation

npm install html-tpl-loader --save-dev

Usage

Documentation: Using loaders

var template = require("html-tpl!./file.html");
// => returns the template function compiled with underscore (lodash) templating engine.

// And then use it somewhere in your code
template(data) // Pass object with data

Alternatively you can also define html-tpl in your webpack.config file:

  {
    module: {
      loaders: [
        { test: "\.tpl.html$", loader: "html-tpl" },
      ]}
  }
  var template = require('./file.tpl.html');

The html-tpl loader allows you to minify the html before compiling by setting a loader query string

  {
    module: {
      loaders: [
        { test: "\.tpl.html$", loader: "html-tpl?minimize=true" }
      ]
  }

The html-tpl loader allows you to not to add lodash before compiling by setting a loader query string

  {
    module: {
      loaders: [
        { test: "\.tpl.html$", loader: "html-tpl?lodash=false" }
      ]
  }

The html-tpl loader allows you to configure lodash template settings by setting a loader query string

  {
    module: {
      loaders: [
        { test: "\.tpl.html$", loader: "html-tpl?evaluate=\\{\\[([\\s\\S]+?)\\]\\}&interpolate=\\{\\{([\\s\\S]+?)\\}\\}" }
      ]
  }

Tests

Build Status

Run unit tests:

  npm install
  npm test

Demo

http://jantimon.github.io/html-tpl-loader/

License

MIT (http://www.opensource.org/licenses/mit-license.php)

html-tpl-loader's People

Contributors

jantimon avatar

Watchers

James Cloos avatar  avatar  avatar

Forkers

dasest404

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.