Webpack plugin for using easy html (ehtml)

Installation

yarn add easy-html-webpack-loader

Usage

Since easy-html's output is HTML, it's best served in conjunction with the raw-loader.

Angular 2+

Here you just need to be able to import *.ehtml files.

const macros = require('../src/app/shared/easy-html-macros');
...
return {
    ...
    module: {
        rules: [{
                test: /\.ehtml$/,
                use: [
                    {
                        loader: "raw-loader"
                    },
                    {
                        loader: "easy-html-webpack-loader",
                        options: {macros: macros}
                    }
                ]
            }]
    }
}

The example code is found here And in your angular component now you can write:

const txt = require('./about.component.ehtml');
console.log('txt1', txt);

@Component({
  selector: "about",
  styles: [],
  templateUrl: "./about.component.ehtml"
})
export class AboutComponent implements OnInit {}

The example code is found here

Vue

For Vue it is required not only to recognise the ehtml file but also to recognise the ehtml code inside the Vue component and this required a llitle bit different webpack config. To vue.config.js (vue-cli 3.0) add the following code:

  configureWebpack: config => {
    const use = [{loader: 'raw-loader'},
            {
              loader: "easy-html-webpack-loader",
              options: {
                // macros: macros,
              }
            }
          ]

    config.module.rules.push({
          test: /\.ehtml$/,
          oneOf: [
                    {
                      resourceQuery: /^\?vue/,
                      use: [
            {
              loader: "easy-html-webpack-loader",
              options: {
                // macros: macros,
              }
            }
          ]
                    },
              // use: ['raw-loader', 'easy-html'],
              {use: use}
          ]
        })
  }

The example code is found here Now after Webpack restart you can use it in your components:

<template lang="ehtml">
  .row {
      .col {
          form @submit.prevent=submit {
              input v-model="frm.z" {}

              button.btn.btn-primary { 'Submit' }
          }
      }
  }
</template>

The example code is found here

License

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