❤
npm
Sign UpSign In

html-webpack-template-literal-plugin

1.5.0 • Public • Published

html-webpack-template-literal-plugin

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

travis-ci Version Dependencies 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
  2. 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

Readme

Keywords

Package Sidebar

Install

npm i html-webpack-template-literal-plugin

Repository

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

Homepage

github.com/lovetingyuan/html-webpack-template-literal-plugin#readme

Weekly Downloads

3

Version

1.5.0

License

MIT

Unpacked Size

74.9 kB

Total Files

18

Last publish

Collaborators

  • tingyuan
Try on RunKit
Report malware