Webpack Academy #3: HTML
Tags: webpack, javascript, css, webdev
Published: 2021-08-18 21:22:41

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
<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
<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!

```javascript
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
<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 👇

```js
new HtmlWebpackPlugin({
   title: 'Webpack academy title',
   template: './src/index.html',
   inject: 'body',
   minify: {
      removeComments: true,
      collapseWhitespace: false
   },
})
```

And get it in our **HTML** 👇

```html
<head>
   <title><%= htmlWebpackPlugin.options.title %></title>
</head>
```

Output 👇

```html
<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](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!