inspired by html-webpack-plugin,simple and efficient Webpack plugin that inject script label and style links into your html
npm install inject-html-webpack-plugin --save--devadd 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'],
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>- transducer: apply transducer to injected file's url,accept prepended string or function that receive file path as argument and return url string as result
- filename: html file path which injected
- chunks: injected array of chunks
- jsLabelTemplate: use function to generate js Label
- cssLabelTemplate: use function to generate css Label
- startJS: start indentifier where to inject script labels,(eg:
<!-- start:js -->) - endJS: end indentifier where to inject script labels,(eg:
<!-- end:js -->) - startCSS: start indentifier where to inject style links,(eg:
<!-- start:css -->) - endCSS: end indentifier where to inject style links,(eg:
<!-- end:css -->) - 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