YoVDO

Webpack 4 Fundamentals

Offered By: Frontend Masters

Tags

Webpack Courses Web Development Courses Lazy Loading Courses Source Maps Courses Tree Shaking Courses

Course Description

Overview

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!

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

Related Courses

Angular Avanzado: Lleva tus bases al siguiente nivel - MEAN
Udemy
Angular: Routing
LinkedIn Learning
Angular Router In Depth (Angular 18)
Udemy
Angular e integração de APIs
Udemy
Learn to build an e-commerce app with .Net Core and Angular
Udemy