Webpack

This is a module bundler.Webpack is a static module bundler for JavaScript, created in 2012 and works well with NPMlink - 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 loadDevelopers want to build web pages using Web Components. These are reusable components that encapsulate all the HTML, CSS and JavaScript - ideally lots of small filesWebpack looks at all the dependencies (JavaScript files, TypeScript files, CSS, images, fonts etc) and consolidates everything into one fileOffers hot module replacement, automatically rebuilding the bundle when any file changesEasily customised using a 'webpack.config.js' fileSimilar tools include Browserify, Grunt, Gulp, Broccoli, all have lost momentum

Versions

It has advanced configuration settings but there are four main concepts:Entry - the first file to use in the dependency treeOutput - the final file containing everythingLoaders - transform your files before they are addedPlugins - perform actions and custom functionality

Default

It does not require a configuration file and makes the following assumptions1) entry point is src/index2) 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.

webpack-cli

Install the command line interface webpack module.This is a prerequisite for webpack version 4.0This 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

webpack-dev-server

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 ReplacementThe 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

html-webpack-plugin

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 fileThis lets you automatically generate a new html file that references the new javascript file.

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

clean-webpack-plugin

copy-webpack-plugin

style-loader

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

style-loader

css-loader

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