An open API service indexing awesome lists of open source software.

https://github.com/lovetingyuan/html-webpack-template-literal-plugin

Use es6 template literal to compile html file that works with html-webpack-plugin
https://github.com/lovetingyuan/html-webpack-template-literal-plugin

html html-template html-webpack-plugin plugin template-literals webpack

Last synced: 2 months ago
JSON representation

Use es6 template literal to compile html file that works with html-webpack-plugin

Awesome Lists containing this project

README

        

## html-webpack-template-literal-plugin

💝 Use es6 template literal to compile html file that works with html-webpack-plugin(support webpack v4)

[![travis-ci](https://travis-ci.org/lovetingyuan/html-webpack-template-literal-plugin.svg?branch=master "CI")](https://travis-ci.org/lovetingyuan/html-webpack-template-literal-plugin)
[![Version](https://img.shields.io/npm/v/html-webpack-template-literal-plugin.svg "version")](https://www.npmjs.com/package/html-webpack-template-literal-plugin)
[![Dependencies](https://david-dm.org/lovetingyuan/html-webpack-template-literal-plugin/status.svg "dependencies")](https://david-dm.org/lovetingyuan/html-webpack-template-literal-plugin)
[![License](https://img.shields.io/npm/l/html-webpack-template-literal-plugin.svg "License")](https://github.com/lovetingyuan/html-webpack-template-literal-plugin/blob/master/LICENSE)

webpack-logo

### install
`npm install html-webpack-template-literal-plugin --save-dev`

or

`yarn add html-webpack-template-literal-plugin -D`

### usage

1. specify **`templateData`** option in [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin/)
2. use `html-webpack-template-literal-plugin`

the following values are available besides the values in `templateData`

```javascript
{
publicPath: 'String, webpack publicPath',
assets: 'Array, all assets files name generated by webpack',
webpack: 'Object, the webpack stats object(it is not the final stats)',
webpackConfig: 'Object, webpack config object',
pluginAssets: 'Object, assets info generated by html-webpack-plugin'
}
```

### example

webpack.config.js

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplateLiteralPlugin = require('html-webpack-template-literal-plugin');

const webpackConfig = {
// ...
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: '!!html-loader!index.html',
// other config options
templateData: { // template literal data
title: 'this is title'
}
}),
new HtmlWebpackTemplateLiteralPlugin()
]
}
```

index.html

```html




${title}



```

### ⚠️ NOTE
**You must set a loader to process `index.html`**, eg: [`raw-loader`](https://github.com/webpack-contrib/raw-loader) or [`html-loader`](https://github.com/webpack-contrib/html-loader) are both ok.

Please view https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md for detail.

Pay attention to possible [`XSS`](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) attack and make sure the `templateData` is reliable

### license
MIT