Learn the core concepts of Webpack 4 with Sean Larkin – maintainer of Webpack. You'll start entirely from scratch by adding webpack with npm and separate your dev and production environments. Then you'll learn to lazy load your JavaScript through code splitting, remove code you don't need through tree shaking, and control your entire build pipeline with popular loaders and plugins from the Webpack ecosystem. Be confident in building and shipping your code with Webpack – the open source bundler responsible for powering some of the most popular and high-performance web applications!
Overview
Syllabus
- Introduction
- Problems with Script Loading
- History of Modules
- EcmaScript Modules (ESM)
- Introducing Webpack
- Configuring Webpack
- Using Webpack for the First Time
- Adding npm Scripts for Environment Builds
- Setting Up Debugging
- Coding Your First Module
- Adding Watch Mode
- ES Module Syntax
- CommonJS Export
- CommonJS Named Exports
- Tree Shaking
- Webpack Bundle Walkthrough
- Webpack Entry
- Output & Loaders
- Chaining Loaders
- Webpack Plugins
- Webpack Config
- Passing Variable to Webpack Config
- Adding Webpack Plugins
- Setting Up a Local Development Server
- Starting to Code with Webpack
- Splitting Environment Config Files
- Webpack Q&A
- Using CSS with Webpack
- Hot Module Replacement with CSS
- File Loader & URL Loader
- Loading Images with JavaScript
- Limit Filesize Option in URL Loader
- Implementing Presets
- Bundle Analyzer Preset
- Compression Plugin
- Source Maps
- Q&A and Closing Remarks
Taught by
Sean Larkin
