6 Easy step to configure webpack

Webpack was initially released as module bundler tool which help to bundler your all javascript, css and other files. We know old days, Gulp and Grunt were dominated software industry as task runner in your project. Thanks to open source development community to build plugin for Webpack in order to do work as task runner.

When look at below image, surely you remember how these tool were useful in project deployment pipeline.

What is Webpack?

Webpack is an open-source JavaScript 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.

You can read more about Webpack over here.

How to configure Webpack in your project ? Basic Steps

You need to follow 6 basic steps to configure and run the webpack in your project.

Environment – Windows, Linux or Mac OS
Visual Studio Code Text Editor
NodeJS

First we create a folder and execute below command to generate package.json file
npm init -y

I have added below sub folder into the project folder.
src – will add out all source code and resources files.
dist – once Webpack bundle all files will place into dist or distribution folder. which mean package is ready to deploy

Execute below command to get Webpack and Webpack-cli into the project
npm install webpack webpack-cli --save-dev

Adding index.html and simple javascript file into the project.

In order to work Webpack, we need to provider webpack configuration file in root level of the project. Basic webpack.config.js as below.

entry – where Webpack start to read javascript file.
output – where you tell Webpack to save processed files

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Basic setup is really and now we can test using below command
npx webpack --config webpack.config.js

now you can see, index.js file has been created in dist folder.

Other Important Configuration

What is plugins?

Webpack plugin interface provides you to develop your own file processing system into deployment pipeline. Nice things is most of the features within Webpack itself use this plugin interface. This makes Webpack flexible.

You can get most popular plugins from over here

How to configure HtmlWebpackPlugin?

We know in previous setups we just bundle javascript file into a file and put in dist folder. now we need to copy HTML files into it. So that we can use HtmlWebpackPlugin.

Execute below command to add plugin into the project.
npm install html-webpack-plugin --save-dev

I have done few modification on Webpack configuration

In Index.html page, I have removed javascript entry and added parameter to populate title comes from webpack config file.

Execute below command to generate output.

How to configure CleanWebpackPlugin?

This plugin to remove/clean your build folder.

Execute below command
npm install clean-webpack-plugin --save-dev

When every time project is being built, this plugin will clean all previous build files in dist folder.

More Plugins

You can read more configuration details over here.

Mode

Providing the mode configuration option tells webpack to use its built-in optimizations accordingly.

'development' | 'production'
Default will be 'production'

How to configure it?

In Webpack configuration file

module.exports = {
  mode: 'development'
};

In command line parameter
webpack --mode=development

What is Loaders?

Using webpack allows you to use import or require statements in your JavaScript code to not just include other JavaScript, but any kind of file, for example CSS.

Webpack aims to handle all our dependencies, not just JavaScript, and loaders are one way to do that.

How to configure css-loader?

The css-loader interprets @import and url() like import/require() and will resolve them.

Execute below command to add plugin into the project.
npm install css-loader --save-dev

In Webpack config file you have to add rule for css loader

You have to import necessary css file need to be bundled along the Javascript.

when you build the project you can see css file are being bundled into dist folder. But how do we load file into DOM. For that we have to use another plugin call style-loader

How to configure style-loader?

This loader will help to inject css file into DOM.

Install the plugin
npm install style-loader --save-dev

Adding this entry will help Webpack to inject css files into DOM for you.

More Loaders

You can get more popular Loaders from over here.

Hot Module Replacement

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways

Keep application state as it’s until load the new module.
Saving development time

How to configure?

Setup Webpack dev server
npm install webpack-dev-server --save-dev

Start Dev server with hot reloader enable
npx webpack-dev-server --mode development --hot

or

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
     contentBase: './dist',
     hot: true,
  }
};

Webpack – 6 Easy Steps to Configure