💝 Use es6 template literal to compile html file that works with html-webpack-plugin(support webpack v4)
npm install html-webpack-template-literal-plugin --save-dev
or
yarn add html-webpack-template-literal-plugin -D
- specify
templateData
option 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'
}
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>
You must set a loader to process index.html
, eg: raw-loader
or 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
attack and make sure the templateData
is reliable
MIT