Inspired by inject-html-webpack-plugin, this is a simple and efficient webpack plugin that injects script and style tags into your HTML.
npm install '@ethikz/inject-html-webpack-plugin' --save--devadd 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>- 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
- if injecting into a single file, just pass it as a string
- chunks: injected array of chunks
- startJS: start identifier where to inject script tag, ( eg:
<!-- start:js -->) - endJS: end identifier where to inject script tag, ( eg:
<!-- end:js -->) - startCSS: start identifier where to inject style tag, ( eg:
<!-- start:css -->) - endCSS: end identifier where to inject style tag, ( 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