This is a module bundler.
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
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.
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
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
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