Html-webpack-template-literal-plugin NPM

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

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

usage

specify templateData option in html-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>