html-webpack-injector
v1.1.4
Published
Helps to inject chunks to head and body via HtmlWebpackPlugin with additional options to add async/defer to chunks
Downloads
36,077
Maintainers
thearchitgargReadme
npm i --save-dev html-webpack-injector yarn add --dev html-webpack-injectorThis is a webpack plugin that simplifies injection of chunks in head and body tags of HTML files using HtmlWebpackPlugin to serve your webpack bundles. This is especially useful when you want to inject some chunks to head and some chunks to body using HtmlWebpackPlugin.
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInjector = require('html-webpack-injector');
module.exports = {
entry: {
index: "./index.ts",
index_head: "./index.css" // add "_head" at the end to inject in head.
},
output: {
path: "./dist",
filename: "[name].bundle.js"
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "./dist/index.html",
chunks: ["index", "index_head"]
}),
new HtmlWebpackInjector() // Initialize plugin
]
}This will generate a file dist/index.html containing the following
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Archit's App</title>
<script type="text/javascript" src="index_head.bundle.js"></script></head>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>You have to add _head in the entry point chunk name and it will be automatically injected in the head.
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "./dist/index.html",
chunks: ["index", "index_head"],
chunksConfig: { // Added option
async: ["index_head"],
defer: ["index"]
}
}),
new HtmlWebpackInjector()
]