A Detailed Introduction to Webpack: Installation, Configuration, Loaders, Plugins, Lazy Loading and Vendor Chunks

What Is a Module Bundler?

Most languages allow you to split code into multiple files and import them, but browsers cannot load modules directly. A module bundler solves this by either loading modules asynchronously or concatenating them into a single <script> file that the browser can execute.

Without a bundler you would have to manually manage script order, load many <script> tags, and suffer from poor performance and maintainability.

Why Choose Webpack?

Webpack stands out because it offers a simple entry point, a powerful plugin system, and a large community. It can avoid many pitfalls of earlier tools, works out‑of‑the‑box for simple cases, and scales to complex applications.

Installing Webpack

First ensure Node.js and npm are installed. Then install Webpack locally (recommended) with:

npm install webpack -D

Initialize a project:

npm init (accept defaults)

Install a sample dependency, e.g., Lodash:

npm install lodash -S

Create a src folder and a src/main.js file containing a simple array and a map call that squares each number, then log the result.

Webpack Command Line

Without a config file you can build with a single command that specifies the input and output files:

webpack src/main.js dist/bundle.js

In the tutorial a npm script is added to package.json under the scripts section, e.g.:

{ "scripts": { "build": "webpack src/main.js dist/bundle.js" } }

Running npm run build produces dist/bundle.js , which can be executed with node dist/bundle.js or loaded in a browser via a <script> tag.

Webpack Configuration File

For more complex setups a webpack.config.js file is created at the project root. The file exports a configuration object that defines entry , output , and other options.

Example (simplified):

module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: __dirname + '/dist' } };

Loaders – Transforming Files

Loaders allow Webpack to process non‑JavaScript files. The tutorial first adds babel-loader to transpile ES2015+ code to ES5.

Installation:

npm i -D babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime babel-polyfill

Configuration snippet:

{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }

The .babelrc (or inline options ) specifies the presets and optional plugins .

Next, a Handlebars loader is added to compile .hbs templates into JavaScript functions:

npm install -D handlebars-loader handlebars

A template file src/numberlist.hbs is created and imported in main.js with the loader prefix, e.g., import template from '!!handlebars-loader!./numberlist.hbs'; .

Plugins – Extending Webpack

Plugins can hook into the build process. The tutorial uses html-webpack-plugin to generate an index.html that automatically includes the bundled script.

Installation:

npm i -D html-webpack-plugin

The plugin is required at the top of webpack.config.js and added to the plugins array:

plugins: [ new HtmlWebpackPlugin({ title: 'Webpack Demo' }) ]

A simple development server is added with http-server and an npm script named server (or start ) to launch the site at localhost:8080 .

Lazy Loading (Code Splitting)

Webpack can split bundles into chunks that are loaded on demand. Two approaches are shown:

CommonJS style using require.ensure with a callback.

AMD style using require(['module'], function(mod) { ... }) .

Modern syntax import() is mentioned as the preferred method, though it requires a Babel plugin for older environments.

Vendor Chunk (CommonsChunkPlugin)

To cache third‑party libraries separately, the built‑in CommonsChunkPlugin is configured. The entry object is changed to include a vendor entry that lists libraries such as Lodash and polyfills. The plugin then extracts shared modules into vendor.bundle.js , reducing download size for subsequent builds.

Conclusion

The article walks through a complete Webpack workflow—from basic bundling to advanced features like loaders, plugins, lazy loading, and vendor chunk optimization—demonstrating how Webpack can streamline modern front‑end development.