This is a module bundler.
Webpack is a static module bundler for JavaScript, created in 2012 and works well with NPM
link - webpack.js.org/
Browsers are not very good at requesting their dependencies simultaneously, so making one large request will reduce the time taken for the page to load
Developers want to build web pages using Web Components. These are reusable components that encapsulate all the HTML, CSS and JavaScript - ideally lots of small files
Webpack looks at all the dependencies (JavaScript files, TypeScript files, CSS, images, fonts etc) and consolidates everything into one file
Offers hot module replacement, automatically rebuilding the bundle when any file changes
Easily customised using a 'webpack.config.js' file
Similar tools include Browserify, Grunt, Gulp, Broccoli, all have lost momentum


The webpack-dev-server command is now webpack serve.
Webpack 5 - Oct 2020
Webpack 4 - Feb 2018
Webpack 3 - Jun 2017
Webpack 2 - Jan 2016
Webpack 1 - Feb 2014

It has advanced configuration settings but there are four main concepts:
Entry - the first file to use in the dependency tree
Output - the final file containing everything
Loaders - transform your files before they are added
Plugins - perform actions and custom functionality


It does not require a configuration file and makes the following assumptions
1) entry point is src/index
2) output result is dist/main.js

Install the webpack module.
This lets you bundle all your javascript files into a single file.

npm install --save-dev webpack 

This will create a new subfolder called "node_modules" (C:\temp\myreact\node_modules).
The '--save-dev' switch will add this module as a devDependency in the packages.json file.


Install the command line interface webpack module.
This is a prerequisite for webpack version 4.0
This lets you use the command line to configure the webpack.config.js file.
Any parameters sent to the CLI will map to their corresponding parameter in the config file.

npm install --save-dev webpack-cli 


This provides a local development server that provides live reloading.
Every time you make a change to one of the files the browser will reload automatically

Install the webpack development server module.

npm install --save-dev webpack-dev-server 

Automatic Replacement
The webpack-dev-server supports multiple modes to automatically refresh the page: Iframe mode (page is embedded in an iframe and reloaded on change) Inline mode (a small webpack-dev-server client entry is added to the bundle which refreshes the page on change)

Each mode also supports Hot Module Replacement.
In Hot Module Replacement, the bundle is notified that a change happened.
Rather than a full page reload, a Hot Module Replacement runtime could then load the updated modules and inject them into a running app.

npm install --save-dev webpack-dev-server --hot 


This is a webpack plugin that will generate an html file that includes all the webpack bundles using <script> tag.
You will need to add this plugin to your webpack configuration file
This lets you automatically generate a new html file that references the new javascript file.

npm install --save-dev html-webpack-plugin 




This is a webpack plugin that can load a CSS file and inject it into a document.



This is a webpack plugin that can parse a CSS file and apply transforms to it


© 2023 Better Solutions Limited. All Rights Reserved. © 2023 Better Solutions Limited TopPrevNext