Gulp and Webpack
Module Bundling
On a high level, module bundling is simply the process of stitching together a group of modules (and their dependencies) into a single file (or group of files) in the correct order.
Why bundle modules at all?
When you divide your program into modules, you typically organize those modules into different files and folders. Chances are, you’ll also have a group of modules for the libraries you’re using, like Underscore or React.
As a result, each of those files has to be included in your main HTML file in a <script> tag, which is then loaded by the browser when a user visits your home page. Having separate <script> tags for each file means that the browser has to load each file individually: one… by… one, which is very time consuming.
To get around this problem, we bundle, or “concatenate” all our files into one big file (or a couple files as the case may be) in order to reduce the number of requests.
Webpack
Webpack is a module bundler.
Webpack config file:
Output of webpack command will be: bundle.js. You will use this inside your entry html file like index.html etc.
Gulp
Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. At a high level, gulp reads files as streams and pipes the streams to different tasks. These tasks are code-based and use plugins. The tasks modify the files, building source files into production files.
Using code over configuration, utilize all of JavaScript to create your gulpfile — where tasks can be written using your own code or chained single purpose plugins.
