html-webpack-custom-inject

enhance html-webpack-plugin for custom inject code fragment

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
html-webpack-custom-inject
000.0.36 years ago6 years agoMinified + gzip package size for html-webpack-custom-inject in KB

Readme

html-webpack-custom-inject

Install


npm install --save-dev html-webpack-custom-inject

Usage


enhance html-webpack-plugin, you can use this plugin inject code fragment before html emit. html template as follows: index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="name" itemprop="name" content="feflow" />
    <title>html resource webpack plugin template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="container">
        <!--[prerender placeholder]-->
    </div>
</body>

</html>
config as follows: webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');
const htmlWebpackCustomInject = require('html-webpack-custom-inject')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, './index.html'),
        }),
        new htmlCopyCustomInject({
            inject(chunkId, res) {
              if (/index\.html$/.test(chunkId)) {
                  return res.replace(/<!--\s*\[prerender\s*placeholder\]\s*-->/g, function() {
                      let res = '<div>code fragment you want to inject<div>';
                      return res;
                  })
              }
              return res;
          }
        })
  ]
}

Options


You can pass a hash of configuration options to html-webpack-custom-inject. Allowed values are as follows
|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |inject|{function inject(entryKey: string,res:string): string}}||inject|
}