So now we have some basics in webpack knowledge!
A lazy issue
If you check the HTML file and the webpack config you should see something wrong, no?
Whenever we need to change the name of the output, for example from bundle.js to output.js, we need to change it in our HTML file. Same issue if we want to add another output file like CSS file before!
How to fix this issue
A plugin will be used to save us HtmlWebpackPlugin!
It will inject our output file directly in our HTML ! It will be very helpful when we will use a hash name (waiting for the next webpack academy to check this 😇) !
So we can remove the import in our HTML file
From this 👇
<html>
<head>
<link rel="stylesheet" href="dist/styles.css">
</head>
<body>
<h1 class="toto">My First Heading</h1>
<p>My first paragraph.</p>
</body>
<script src="dist/bundle.js"></script>
</html>
To this 👇
<html>
<head>
</head>
<body>
<h1 class="toto">My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
We can put the HTML in our /src since it will be used in compilation.
Let's take a look at the config plugin!
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: false
},
})
We put the path to our HTML file, the inject options will indicate to plugins where to put script output file!
If we don't use this option, the bundle file we are put in <head>, and it can be problematic since the html body will be load after loading the script file! It can lead to some issue (for example, the loading of the page when users come into our application)
We use minify property to remove comments, we can also remove whitespace!
✅ And finally we got this as output 👇
<html>
<head>
<link href="style.css" rel="stylesheet"></head>
<body>
<h1 class="toto">My First Heading</h1>
<p>My first paragraph.</p>
<script defer="defer" src="bundle.js"></script></body>
</html>
Other options!
We will check fastly some interesting options about the plugin!
You can use metadata from webpack config and use it in HTML, for example, you can use title for page title, use CDN option to load CDN (we will check this in the next academy
!).
Use title metadata 👇
new HtmlWebpackPlugin({
title: 'Webpack academy title',
template: './src/index.html',
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: false
},
})
And get it in our HTML 👇
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
Output 👇
<title> Webpack academy title </title>
Tadam! ✅
You can see the power of this plugin! Use metadata in our webpack config is more efficient than putting data in HTML, since the webpack config have the current context, HTML should only be a template, not getting any context!
Conclusion
Webpack HTML template plugin is very powerful!
It can carry all injections of output without handling the name of any output file!
We can also inject some metadata! Like title page name
You can check the code used in this article 👇
https://github.com/Code-Oz/webpack-academy/tree/ca917a089029d5fe509d3eb85b832f745443e4f0
I hope you like this reading!
🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁
Or get it HERE
☕️ You can SUPPORT MY WORKS 🙏
🏃♂️ You can follow me on 👇
🕊 Twitter : https://twitter.com/code__oz
👨💻 Github: https://github.com/Code-Oz
And you can mark 🔖 this article!
Top comments (0)