This is a module bundler.
Webpack is a static module bundler for JavaScript, created in 2012 and works well with NPM
link - https://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


Webpack 4 - Feb 2018
Webpack 3 - Jun 2017
Webpack 2 - Jan 2016
Webpack 1 - Feb 2014


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 


If you need a configuration file you can create a webpack.config.js file in the root folder.
If the file is found webpack will automatically use it.


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 



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