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


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.



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


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 

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


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



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