Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
Algorithms Teaching Guide
Interview Prep Teaching Guide
User Experience Teaching Guide
6.1: Webpack
What is webpack?
At its core, webpack (a JavaScript library) is a static module bundler for modern JavaScript applications. When webpack processes your application, it combines all the modules your project needs into one or more bundles. These bundles are static assets which your content is served from.

How does webpack work?

When webpack processes your application, it starts from a list of modules defined on the command line or in its configuration file. Starting from these entry points, webpack recursively builds a dependency graph that includes every module your application needs, transforms them if necessary, then bundles all of those modules into a small number of bundles - often, only one - to be loaded by the browser. In other words, webpack pre-processes our files before they are loaded by the browser.
entry point - The point from which to start the application bundling process.
dependency graph- A dependency graph is a data structure formed by a directed graph (we will cover graphs later on in Algorithms), that describes the dependency of an entity in the system on the other entities of the same system, i.e, each node points to the node on which it depends.

Why do we use webpack?

  1. 1.
    We don't have to worry about the sequence in which our script tags load, or forgetting to include a particular script tag.
  2. 2.
    webpack minifies our files, resulting in our files taking up less space.
  3. 3.
    webpack can also make transformations to our modules before they are bundled, e.g., sass to css, or es6 to es5 that the browser can understand.
Minification - the process of removing all unnecessary characters from JavaScript source code without altering its functionality. This includes the removal of whitespace, comments, and semicolons, along with the use of shorter variable names and functions.

Webpack Order of Events

Steps 1, 2, 3 are new. Steps 4, 5, 6, 7 are what we were doing previously.
  1. 1.
    The webpack command is run.
  2. 2.
    Webpack transforms src/script.js and/or whichever other files or groups of files are specified in Webpack configuration. "src" stands for "source".
  3. 3.
    Webpack puts the resulting file in ./dist, or whichever target folder is specified in Webpack configuration. "dist" stands for "distribution".
  4. 4.
    The Express.js server starts with node index.js on the command line. The server is ready to accept requests.
  5. 5.
    The browser makes a request to the server for a page.
  6. 6.
    The browser reads a script tag in the HTML response. The script tag's src attribute triggers a GET request to the URL in that attribute.
  7. 7.
    The Express server, based on the request path, looks in the filesystem for a file that matches the request. In our example, the script tag requests the transformed script.js file in ./dist. Because the script tag initiated the request, the browser's JS interpreter processes the response's file contents.

Further Reading

Last modified 1mo ago