Webpack – from scratch to a working web application bundle (WBPCK)

Programming, Web Programming

Learn to use Webpack, a Node.js-based bundler that lets you import modules, assets and modern JavaScript into a single browser-ready bundle. You will learn installation, core concepts, loaders, plugins and development vs production setup.

This hands-on course explains how to configure Webpack for development and production, covering CSS preprocessors, transpilation with Babel, polyfills for older browsers and optimizing output with minification, caching and loader/plugin choices.

Location, current course term

Contact us

Custom Customized Training (date, location, content, duration)

The course:

Hide detail
  • Introduction
    1. Installation
    2. First run
    3. How it actually works
  • Basic configuration
    1. Running without configuration
  • Assets (resources)
    1. CSS
    2. Fonts
    3. Images
    4. Image minification
    5. Static data (JSON, CSV, XML)
  • Output control and distribution
    1. Multiple output files
    2. HTML template
    3. File caching
    4. Cleaning the production folder
  • Development with Webpack
    1. Source maps
    2. Watching
    3. Reloading the web page
  • Tools and optimization
    1. Build statistics
    2. Deduplication
    3. Lazy loading scripts
  • Separate configuration for development and production
    1. Configuration principle
    2. Shared common part
  • Custom bundling
    1. Custom polyfills
    2. Babel: transpile to ES5 and add polyfills
    3. CSS and JS linting (code style checks)
    4. CSS preprocessors (LESS, optionally SASS) and autoprefixer
    5. Extracting CSS into a separate file
    6. Improved minification for CSS and JS
    7. Providing JavaScript for older browsers (with polyfills)
Assumed knowledge:
Advanced JavaScript, HTML and CSS; familiarity with modules, Node.js and CSS preprocessors is beneficial.
Recommended previous course:
Advanced JavaScript and Introduction to Node.js (JVS2)
Schedule:
2 days (9:00 AM - 5:00 PM )
Course price:
472.00 € ( 571.12 € incl. 21% VAT)
Language: