https://github.com/berardo/html-es6-template-loader

Webpack loader to parse HTML as ES6 template strings
https://github.com/berardo/html-es6-template-loader

es6-javascript javascript loader webpack webpack-loader webpack2

Last synced: 2 days ago
JSON representation

Webpack loader to parse HTML as ES6 template strings

• Host: GitHub
• URL: https://github.com/berardo/html-es6-template-loader
• Owner: berardo
• Created: 2017-02-09T15:02:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-02T05:08:39.000Z (over 6 years ago)
• Last Synced: 2024-09-26T01:47:33.146Z (7 days ago)
• Topics: es6-javascript, javascript, loader, webpack, webpack-loader, webpack2
• Language: JavaScript
• Size: 5.86 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/html-es6-template-loader.svg)](https://badge.fury.io/js/html-es6-template-loader)

![Dependencies status](https://david-dm.org/berardo/html-es6-template-loader/status.svg)

![devDependencies status](https://david-dm.org/berardo/html-es6-template-loader/dev-status.svg)

# WEBPACK - HTML ES6 TEMPLATE LOADER

Webpack loader to parse HTML as ES6 template strings

## Motivation

This loader is mostly indicated for vanilla Javascript projects

(no template engines), as it surrounds imported html file with

ES6 string templates operator (backticks: ``) and gives you

ability to load exported HTML / text files as local strings,

suporting interpolations.

## Usage

To add it as dev dependency:

```bash

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

```

To set this loader on **webpack.config.js**:

```javascript

module: {

  rules: [

    {

      test: /\.html$/,

      use: ['html-es6-template-loader']

    },

  ],

}

```

A template may look like this:

File: e.g. `template.html`

```html

Every time you use ${this.avoid} a ${this.who} dies

```


A javascript file may look like this:

 ```javascript

 import template from './template.html';

 document.getElementById('container').innerHTML = template({

   avoid: 'var',

   who: 'puppy'

 });

 ```

You might want to have the template exported as ES5 concatenated string.

To do that, just add a query parameter `transpile = true`:

```javascript

module: {

  rules: [

    {

      test: /\.html$/,

      use: ['html-es6-template-loader'],

      options: {

        transpile: true

      },

    },

  ],

}

```