This content originally appeared on DEV Community and was authored by CodeOzz
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
If you want to have a nice article to read about web dev, you can subscribe to my FREE newsletter at this url -> https://codeoz.substack.com/welcome
And you can follow me on :
Twitter : https://twitter.com/code__oz
Github: https://github.com/Code-Oz
And if you want to buy me a coffee :D -> https://www.buymeacoffee.com/CodeoZ
This content originally appeared on DEV Community and was authored by CodeOzz
CodeOzz | Sciencx (2021-08-18T21:22:41+00:00) Webpack Academy #3: HTML. Retrieved from https://www.scien.cx/2021/08/18/webpack-academy-3-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.