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
- Host: GitHub
- URL: https://github.com/lovetingyuan/html-webpack-template-literal-plugin
- Owner: lovetingyuan
- License: mit
- Created: 2018-01-08T11:56:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-10T04:24:13.000Z (about 7 years ago)
- Last Synced: 2025-04-01T17:11:52.818Z (2 months ago)
- Topics: html, html-template, html-webpack-plugin, plugin, template-literals, webpack
- Language: JavaScript
- Homepage:
- Size: 62.5 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
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)
[](https://travis-ci.org/lovetingyuan/html-webpack-template-literal-plugin)
[](https://www.npmjs.com/package/html-webpack-template-literal-plugin)
[](https://david-dm.org/lovetingyuan/html-webpack-template-literal-plugin)
[](https://github.com/lovetingyuan/html-webpack-template-literal-plugin/blob/master/LICENSE)
### 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