How to use Webpack and HTML Webpack Plugin | Simple Guide

Photo of author

Webpack is a highly extensible and adaptable static module bundler for JavaScript applications. Due to its adaptability, you can plug in external loaders and plugins to achieve your goal.

The graphic below demonstrates how webpack traverses your application starting at the root entry point, constructs a dependency graph made up of dependencies that impact the root file directly or indirectly and creates efficient bundles of the combined modules.

See Also: How To Add A Line Before And After A Text In HTML?

Webpack

The term used by webpack is frequently used in this article and referred to in webpack’s documentation.

webpack

You must understand this in order to grasp how webpack functions.

Chunk

It is the code taken out of modules. A chunk file’s use is to hold this code. Moreover, chunks are frequently employed when using Webpack to accomplish code-splitting.

Modules

Your import modules are your application’s broken-down components to carry out a particular operation or function. Modules produced using the ES6, CommonJS, and AMD syntax are supported by Webpack.

Assets

Webpack and other bundlers, in general, usually refer to assets. During the build phase, static files bundle together, and images, typefaces, and even video files can be among these files. As you read further into the lesson, you’ll see how we use loaders to interact with different asset kinds.

HTML webpack plugin

To serve your webpack bundles, HTML files may be created more easily with the HtmlWebpackPlugin. This is particularly helpful for Webpack bundles whose filename hash changes with each compilation. You have three options for creating an HTML file: using your loader, utilizing Lodash templates, or letting the plugin do it. The body of the HTML5 document that the plugin will produce for you using script tags will include all your webpack bundles.

htmlwebpackplugin

Add the following plugin to your webpack.

Configuration:

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

const path = require(‘path’);

module.exports = {

  entry: ‘index.js’,

  output: {

path: path.resolve(__dirname, ‘./dist’),

filename: ‘index_bundle.js’,

  },

  plugins: [new HtmlWebpackPlugin()],

};

This will produce the following in the file dist/index.html:

<!DOCTYPE html>

<html>

  <head>

<meta charset=”UTF-8″ />

<title>webpack App</title>

  </head>

  <body>

<script src=”index_bundle.js”></script>

  </body>

</html>

If you have numerous entry points for webpack, the produced HTML will contain all of them with script> tags. The produced HTML’s head> element will include any CSS assets you have included with link> tags, such as CSS extracted using the MiniCssExtractPlugin.

Javascript modularity 

When JavaScript’s modularity was first established, there was no native support for running modules inside browsers. The CommonJS blueprint was used to support modular programming in Node.js, and JavaScript developers adopted it to create server-side apps. Additionally, by creating code in a more modular structure, developers could avoid namespace clashes and create easier-to-manage codebases.

javascript

However, there was still a problem. Often, while running JavaScript, modules couldn’t be utilized in web browsers. Addressing this issue by developing module bundlers, which produce optimized bundles of your code for the browser of your end-user to download and run. Examples of these bundlers include webpack, Parcel, Rollup, and Google’s Closure Compiler.

Moreover, it can be advantageous to generate different HTML outputs for multiple items for various purposes. You might want to create several applications or upload a static website to GitHub pages as a demonstration. It can be advantageous to generate different HTML outputs for multiple items for various purposes. It is pretty simple to produce using HTMLWebpackPlugin and Webpack, and I used it to create dynamic test pages for our visual regression system. I also developed a development environment for the web components of our Design System using the same system. Using the same architecture, I’ve constructed a basic “main page” that allows developers to navigate between the different tests and test them live using a webpack dev server. By introducing a further attribute to the entry object, I add a primary entry that will link the other entries.

entry.mainPage = (path.join(__dirname, “assets/main.js”));

The main.js file effectively builds a menu redirecting to other HTML files. Essentially, we end up with a “website” that developers can use to work on each component separately.

See Also: How to Choose the Interface of a Website Properly?

Conclusion

We may improve our development experience by using Webpack’s development server. For instance, we receive HMR out of the box. It’s a terrific tool, Webpack. Extremely adjustable with a vast ecosystem. The HTMLWebpackPlugin has been there since the beginning and is, in my opinion, one of the most used webpack plugins. Now that you know how to use it, you can create numerous HTML files for numerous entries by using the HTML webpack plugin.

Leave a Comment