Webpack

This is a module bundler.
webpack.js.org
It combines all the necessary files into a single javascript file that can be loaded via a <script> tag in the html file.
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


Versions

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


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


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


webpack.config.js

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.




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