Webpack 4 Fundamentals
Learning Paths:
Topics:
Table of Contents
Why Webpack
Introduction
Sean Larkin introduces himself and the Webpack Fundamentals course.
Problems with Script Loading
By reviewing the limitations of JavaScript for web applications, Sean explains the problems that Webpack solves
History of Modules
Sean reviews the progression of JavaScript web development around the sharing modules, which are highly self-contained with distinct functionality that can be rearranged, removed, or added as necessary without disrupting the entire codebase.
EcmaScript Modules (ESM)
Sean discusses EcmaScript Modules (ESM), a standard pattern for importing JavaScript modules.
Introducing Webpack
Sean introduces and discusses the history of Webpack, which is a modular bundler that allows developers to write in any module format and compiles them into the browser.
Configuring Webpack
Sean illustrates the three ways to use Webpack: Webpack config, Webpack CLI, and Node API.
Webpack from Scratch
Using Webpack for the First Time
Sean walks through setting up and running Webpack for the first time.
Adding npm Scripts for Environment Builds
Sean demonstrates how to load and establish development environments such as development and production with Webpack.
Setting Up Debugging
Sean illustrates how to set up debugging through Webpack and its integration with Chrome DevTools.
Coding Your First Module
Sean shows how to code a simple JavaScript module, export it and import it with Webpack using ESM module syntax.
Adding Watch Mode
Sean demonstrates how to watch mode, which instructs Webpack to incremental compile as changes are made to the code.
ES Module Syntax
Sean walks through the ESM syntax to export variables and import bindings within Webpack.
CommonJS Export
Since Webpack has interoperability between ESM and CommonJS syntax, Sean shows how to use CommonJS to import a module.
CommonJS Named Exports
Sean shows how to use CommonJS named exports within Webpack.
Tree Shaking
Sean illustrates that when bundling code into production Webpack uses tree shaking, a term commonly used in the JavaScript context for dead-code elimination.
Webpack Bundle Walkthrough
Sean examines step-by-step the Webpack runtime, which is the loading and resolving logic needed to connect modules as they interact.
Webpack Core Concepts
Webpack Entry
Sean starts to review the core concepts of Webpack by first examining Entry. Entry tells Webpack what files to load for the browser.
Output & Loaders
Continuing to review Webpack concepts, Sean examines Output and Loaders. Output works in tandem with Entry telling Webpack where and how to distribute bundles or compilations. Loaders instruct Webpack on how to modify files before its added to the dependency graph.
Chaining Loaders
Chaining Loaders are transformations applied in a pipeline to the resource. Each loader passes values onto the next loader until the end loader, where Webpack expects JavaScript to be returned. Sean takes questions from students.
Webpack Plugins
Sean discusses Webpack plugins, which are objects with an apply property that allows for hooking into the entire compilation lifecycle.
Webpack Config
Sean starts to build out a configuration for Webpack with features found in almost Webpack config file.
Passing Variable to Webpack Config
Sean demonstrates how to pass variables to Webpack config.
Adding Webpack Plugins
Sean shows how to add plugins to Webpack config.
Setting Up a Local Development Server
Sean shows how to set up a local development server based on Express with Webpack that serves the contents of a distributed folder.
Starting to Code with Webpack
Starting to build a simple web document upon the Webpack foundations, Sean shows how to import custom modules into other modules.
Splitting Environment Config Files
Sean demonstrates how to load extra JavaScript module merge into a base Webpack configuration.
Webpack Q&A
Sean answers questions from students about using the Webpack HTML plugin against multiple templates, Webpack runs out of memory, and more.
Using Plugins
Using CSS with Webpack
Sean shows how to incorporate CSS into a web application using Webpack.
Hot Module Replacement with CSS
Sean demonstrates how Webpack can patch changes incrementally and apply them to a web document without ever having to reload the browser.
File Loader & URL Loader
Sean reviews common loaders such as the URL Loader, which moves or emits files into the output directory.
Loading Images with JavaScript
Sean loads an image through JavaScript by taking an image, copying the image, and storing the image the within JavaScript by through base64 encoding.
Limit Filesize Option in URL Loader
To reduce page weight of web pages, Sean demonstrates how to set limits on what filesizes of images that should be converted to base64 encoding with the URL Loader.
Implementing Presets
Sean shows to create presets for one or a few special coding scenarios such as testing a feature or analyzing a build when not wanting to endanger the production Webpack configuration.
Bundle Analyzer Preset
Sean demonstrates the Webpack Bundle Analyzer, which is the Webpack plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.
Compression Plugin
Sean illustrates the WebPack Compression Plugin, which prepares compressed versions of assets to serve them with Content-Encoding.
Source Maps
Sean shows how to include source maps from Webpack to allow client-side code readable and debuggable.
