inject-html-webpack-plugin

Inspired by inject-html-webpack-plugin, this is a simple and efficient webpack plugin that injects script and style tags into your HTML.

Install

npm install '@ethikz/inject-html-webpack-plugin' --save--dev

Usage

add the plugin in your webpack config

import InjectHtmlPlugin from '@ethikz/inject-html-webpack-plugin';

module.exports = {
  entry: {
    main: './index.js'
  },
  module: {
    loaders: [
      ...
    ]
  },
  output: {
    path: './dist',
    filename: '[name].min.js'
  },
  plugins: [
    new InjectHtmlPlugin({
      filename: './index.html',
      chunks:[
        'index'
      ],
      transducer: 'http://cdn.example.com',
      custom: [{
        start: '<!-- start:bundle-time -->',
        end: '<!-- end:bundle-time -->',
        content: Date.now()
      }]
    })
  ]
};

then add below placeholders into HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- start:css -->
    <!-- end:css -->

    <!-- start:bundle-time -->
    <!-- end:bundle-time -->
  </head>

  <body>
    <!-- start:js -->
    <!-- end:js -->
  </body>
</html>

Plugin Options

transducer: apply transducer to injected file's URL, accept prepended string or function that receives a file path as an argument and returns URL string as a result

filename: HTML file path or array of paths to be injected

if injecting into a single file, just pass it as a string
```
filename: './index.html'
```

if you want the plugin to inject into multiple files you can pass it an array

filename: [
  './file.html',
  './file1.html',
  './file2.html',
  './file3.html'
]

// or you can define a constant as an array and pass it in
filename: arrayConst

chunks: injected array of chunks
startJS: start identifier where to inject script tag, ( eg:  )
endJS: end identifier where to inject script tag, ( eg:  )
startCSS: start identifier where to inject style tag, ( eg:  )
endCSS: end identifier where to inject style tag, ( eg:  )
custom: array of custom inject, like bundle time, accept objects contains below key/values,
- start: inject start identifier
- end: inject end identifier
- content: injected content

License

MIT License

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!