html-webpack-template-literal-plugin
v1.5.0
Published
use es6 template literal to compile html file working with html-webpack-plugin
Downloads
8
Maintainers
tingyuanReadme
html-webpack-template-literal-plugin
💝 Use es6 template literal to compile html file that works with html-webpack-plugin(support webpack v4)
install
npm install html-webpack-template-literal-plugin --save-dev
or
yarn add html-webpack-template-literal-plugin -D
usage
- specify
templateDataoption inhtml-webpack-plugin - use
html-webpack-template-literal-plugin
the following values are available besides the values in templateData
{
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}</title>
<link rel="preload" href="${publicPath}${assets.find(v => /main\.chunk/.test(v))}" as="script">
</head>
<body>
</body>
</html>⚠️ NOTE
you must set a loader to process index.html
eg: html-loader or raw-loader are both ok.
please view https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md for detail.
license
MIT