This training kit has been developed to learn the basics of Webpack module bundler
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Learning Webpack - Module Bundler

This training kit has been developed for those who:

  • already have the basic knowledge of JavaScript.
  • want to write JavaScript in modular way and bundle it for production use.

This training kit includes a set of example Webpack configurations which are listed in below Table of Content

Prerequisites installation

Assuming that Node.js & npm are already installed & running.

npm install -g webpack webpack-dev-server

Table of Contents

Eg.No. Execution Command Comments
1 webpack entry.js bundle.js Webpack will read entry.js file to build bundle.js
2 webpack entry.js bundle.js -p -p is used for bundle minification
2 webpack entry.js bundle.js -d -d is used for bundle with source maps
3 webpack entry.js bundle.js --progress Know the progress of building the bundle
3 webpack entry.js bundle.js --colors Display text in colors
4 webpack entry.js bundle.js we need the css-loader to process CSS files. We also need the style-loader to apply the styles in the CSS file. They need to be installed locally, without -g
5 webpack entry.js bundle.js --module-bind 'css=style!css' This will simplify the CSS require path. Note: If you are using bash then use single quotes in Command. Please see for more information
6 webpack Webpack will read webpack.config.js from the root directory to build bundle.js
7 webpack --watch Will keep a watch on files to automatically rebuild the bundle
7 webpack-dev-server webpack-dev-server is a development server, it binds a small express server on localhost:8080 which serves your static assets as well as the bundle
8 webpack Multiple entry files are allowed
9 webpack Code splitting and loading files on demand, Open browser and try localhost:8080 see content-1 is loaded but not content-2, Now try localhost:8080/#load see content-1 and content-2 are both loaded
10 webpack Shows how to load 3rd-party plugins
11 webpack Shows how to load JSON file
12 webpack Shows how to load raw file
13 webpack Shows how to configure jshint & JSCS loaders for JavaScript linting
14 webpack Shows how to load Handlebars templates file
15 webpack Shows how to load LESS loader
16 webpack Shows how to configure CSSLint loader for CSS linting
17 webpack Shows how to configure TypeScript loader for TS files


Developed & maintained by author: Ashwin Hegde & Contributors

We appreciate all kinds of feedback and contributions. Thank you for using and supporting this project.

To request a feature, ask a question, or report errors, please send a pull-request on "develop" branch or post it on following link, or vote for the ones that are already registered.


The MIT License (MIT)

Copyright (c) 2016 Ashwin Hegde