inject-html-webpack-plugin's Introduction

inject-html-webpack-plugin

inspired by html-webpack-plugin,simple and efficient Webpack plugin that inject script label and style links into your html

Install

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

Usage

add plugin in your webpack.config.js

var InjectHtmlPlugin = require('inject-html-webpack-plugin')

module.exports = {
    entry:{
        index:"./index.js"
    },
    module:{
        loaders:[
            ...
        ]
    },
    output:{
        path:'./dist',
        filename:'[name].min.js'
    },
    plugins:[
        new InjectHtmlPlugin({
            filename:'./index.html',
            chunks:['index'],
            processor:"http://cdn.example.com",
            customInject:[{
                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 files,accept string to prepended or function that receive file path and return url string
filename: html file path which injected
chunks: injected array of chunks
startInjectJS: start indentifier where to inject script labels,(eg: )
endInjectJS: end indentifier where to inject script labels,(eg: )
startInjectCSS: start indentifier where to inject style links,(eg: )
endInjectCSS: end indentifier where to inject style links,(eg: )
customInject: array of custom inject,like bundle time,accept objects contains below key/values,
- start: inject start identifier
- end: inject end identifier
- content: injected content