Getting started guide with Webpack

Webpack (

What is Webpack?

Webpack requires that the code be divided into modules. You can use any module system (AMD, CommonJS or ES6 Modules). This guide will use ES6 modules, but feel free to adapt the solutions to the module system of your choice.

Why Webpack?

By combining the files you drastically reduce the number of requests to the server. Furthermore, when the application is built across multiple files, the size of those files also comes into play. Minifying the combined file through a production grade minifier reduces the size of the files you request.

Another problem of loading multiple files is that of dependencies and load order. Resolving them is a huge cognitive load. This is where Webpack comes in. Since Webpack needs the code to be split into modules, its easier to resolve and understand dependencies.

Webpack is not the only solution out there. Task runners like Grunt or Gulp can also get the job done. Since both of these tools are built around a plugin ecosystem, you can pick and choose plugins based on your requirements.

Installing Webpack

 npm install -g webpack

This command will install Webpack globally and is available from the command line through the webpack command. It's important to note that Webpack works only with Node and not Bower.

CLI (Command Line Interface)

In app.js:

console.log("Loading...");document.write("Well, hello there Webpack!!!!");

In index.html:

<!DOCTYPE html>
<html lang="en">
<title>Getting started with Webpack: Part 1</title>
<script src="bundle.js"></script>

Now in the command line, type the command:

webpack ./app.js bundle.js

The first argument in the command is the input file, or the file on which Webpack will operate. The second argument is the output file. So when this command is executed you should see a new file called bundle.js in the directory.

Now, it would be cumbersome if you have to do this everytime you change something in your code. To fix that, Webpack can watch for changes in your file and automatically create the output file. To do this, type the following command:

webpack ./app.js bundle.js --watch

Adding the --watch will start watching the app.js file for changes. Whenever webpack detects a change, it will bundle the code into the output file. Webpack will also do a production build of your code.

webpack ./app.js bundle.js -p

Now open bundle.js and voila! Your code is minified and production ready.


Create a file in your project root folder and name it webpack.config.js. Next, install babel and css-loader.

npm install style-loader css-loader babel-loader babel-core babel-preset-es2015 --save-dev

Now in the webpack.config.js file:

module.exports = {
entry: ['./app.js'],
output: {
path: __dirname,
filename: 'bundle.js'
module: {
loaders: [
test: /\.js$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
loaders: ['babel'],
query: {
presets: ['es2015']
test: /\.css$/,
loaders: ['style-loader!css-loader']



module loaders

test - Regular expression mapping to the file extension of the files that you want to apply the module to.

exclude - Regular expression mapping to the files/folders that you want to exclude

include - Files/folder that you want to include

loaders - Name(s) of loaders that you want to apply

presets - Lets webpack know that what kind of code we're writing, in our case ES2015

Now that we have our config file ready, let’s install webpack-dev-server.

npm install webpack-dev-server -g

Now run:


Open your favorite browser and go to http://localhost:8080/webpack-dev-server/ and see the app running. If you make a change in your source files, webpack automatically runs your code through the loaders, bundles them up, and refreshes the page, thanks to our --watch command.

I hope this provided you with a glimpse into the power of using Webpack.

Thanks and Cheers..!!

For more follow :

Software Developer