What is Webpack? 


In this article, we going to learn what is webpack and how to use it. Webpack is the most used package on npm to build node application. So let’s understand the nuts and shell of webpack. This article is for beginners to understand what is webpack?

  1. We will learn what is webpack?
  2. why we would use webpack?
  3. How to use it?
  4. How to setup a modern Javascript application using webpack?

what is webpack

Now let’s first understand what is webpack?

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporates assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file

So basically webpack is a module bundler that bundles up you different files in the javascript file and serves that file. Then you can use that file in HTML.

why we would use webpack?

Using webpack you can compile different file into javascript. we learned how to transcompile es6 code into es5 using babel. If you want to learn how to compile it click on this tutorial to watch tutorialUsing webpack it is very easy to trans-compile it for browser capabilities. Webpack also serves the development server with the auto-reload feature.

Using development server webpack automatically serve a HTML file in the browser. So you don’t need to open HTML file manually in the browser and update it whenever you make any changes in the javascript.

How to use it?

To use webpack you need to first install the node.js in your system. Using node.js we can use npm. Npm or node package manager allows users to install package from the node package repository.

After you install node.js check the version installed in the system. To check the version of node install on your machine open command prompt and type node -v  and press enter. You will get the version of the node on the terminal.

Now let’s create a new project in the vs code.

I am using vs code editor to create this project. you are free to use anything else. But vs code is more powerful than another code editor.

So I will just open a command prompt and create a new directory.

Then just initialize the app using a package.json file.

Now to work with webpack you need to install webpack and webpack-cli package.

Now we’ll create the following directory structure, files and their contents:

Modern-app  >

Src > index.js

Package.json

Now let’s add some javascript code into an index.js file

You can also import modules in javascript files.

The import and export statements have been standardized in ES2015. Although they are not supported in most browsers yet, webpack does support them out of the box.

Now let’s compile this code into es5 using babel.

This package allows transpiling JavaScript files using Babel and webpackNow let’s create webapck configuration file to inform webpack to compile js file into es5.

Now write down a code to compile javascript file into plain javascript code.

Webpack.config.js

Now just back to package.json file and create a script.

Now just run this command using npm start

let’s use this file in HTML so create HTML file in the public folder.

Public > index.html

In this file just create a simple HTML5 snippet.

Now I don’t want to open this file manually.  I will inform webpack to serve this file automatically with the bundle.js file. To do that we need HTML-webpack-plugin. This plugin serves the HTML file with script tag pointing to the bundle.

So let’s install this package.

Now we need to inform webpack to serve HTML file using HTML webpack plugin.

Put this code in a webpack.config.js file.

Now let’s execute npm start command.

Your modern javascript application is ready.

I hope you understand how to set up a Javascript application and what is webpack.

 

Leave a Reply

Your email address will not be published. Required fields are marked *