Webpack is one click away from you.

4 min readNov 20, 2019

What is webpack?

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

It’s a very powerful tool for front-end developers, which makes their work more easier.

Basically, webpack relies on loaders and plugins. Loaders operate on a module level, while plugins rely on hooks provided by webpack and have the best access to its execution process.

Although, webpack features are too extensive yet I am going to explain a bit. It allows you to do asset-hashing, it enables you for HMR (Hot Module Replacement) which also very useful for all front-end-developer, it also allows to do code-splitting and much more.

It also allows you bundle-splitting, which enables the client to reload only a small part of the data in the ideal case.

What is bundler?

Bundler is basically provides you transpiling, which is converting modern Javascript code into ECMAScript 5 that the browser can understand. It provides you tree-shakingwhich is basically process of eliminating dead codes, minification , asset-management and much much more.

What is Transpiling?

Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpile to JavaScript are often called compile-to-JS languages, and are said to target JavaScript.

The famous transpiler, you must heard about is babel , typescript-transpiler (tsc).

What is Asset Hashing?

With webpack, you can inject a hash to each bundle name (e.g., app.s867sdsfaf9df.js) to invalidate bundles on the client side as changes are made.

What is Code-Splitting?

Code-Splitting allows to to get something usable in their hands to make things faster. For example — on home page you will not like the css about-us page to be loaded.

What is HMR (Hot Module Replacement)?

HMR is very interesting topic now a days because it is making development significantly faster. HMR adds, exchanges or removes a module while running an application without full reload.

Configuration

At its core, webpack relies on configuration. To start with basic example you may follow the following steps:

// Creating a folder in your computer 
mkdir webpack4
cd webpack4npm init -y 
// where -y, will create your package.json with default values// starting with webpack
npm i -D webpack webpack-cli// html-loader and html webpack plugin
npm i -D html-webpack-plugin html-loader// starting with babel
npm i -D @babel/core babel-loader @babel/preset-env// for running your code
npm i -D webpack-dev-server// as webpack4 requires `src` folder and src/index.html
mkdir src
cd src

Copy + Paste the following content in index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie-edge" />
 <title>Webpack - Configuration</title>
</head>
<body>
 <div class="container" id="container">
  Hello World
 </div>
</body>
</html>

Create webpack.config.js in the root of your project folder and copy + paste the following:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {
 module: {
  rules: [
   {
    test: /\.js$/,
    use: {
     loader: "babel-loader"
    }
   },
   {
    test: /\.html$/,
    use: {
     loader: "html-loader",
     options: {
      minimize: true
     }
    }
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: './src/index.html',
   filename: './index.html'
  })
 ]
};

Create greetings.js in you src folder and copy + paste this:

const greetings = (name) => {
    return `Hello ${name}`;
}export { greetings }

Create index.js in you src folder and copy + paste this:

import { greetings } from './greetings'console.log(greetings('Dude'));

Update the following code in your package.jsonto manage scripts of your code:

"scripts": {
  "build": "webpack",
  "start": "webpack-dev-server"
}

Now you can create build for your project by running this command:

npm run build

You can now see dist folder is created in your project root directory.

Finally, run this command to start your project.

npm start

Your project is running at http://localhost:8080