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.

THIS TRAINING COURSE WILL HELP YOU:

  • Install and configure Webpack for development and production
  • Bundle JS modules, CSS and static assets into browser packages
  • Use loaders and plugins for transpilation, linting and preprocessing
  • Optimize output with caching, minification and code splitting

WHO SHOULD ATTEND?

  • Frontend developers working with modern JavaScript
  • Web developers needing production-ready builds
  • Developers using Node.js tools and CSS preprocessors
  • Teams wanting to automate bundling and optimization

COURSE LOCATION AND AVAILABLE DATES



Private training

This course is not scheduled as a public course.
It is delivered exclusively as customised training. The content, duration, date, and delivery format are tailored to the customer's requirements and can also be provided in English.

Request customised training

Course content:

Hide details
  • 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)
Prerequisites:
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-17:00)
Price per person:
472.00 € ( 571.12 € incl. 21% VAT)

Training and learning environment

IT classroom with desks, computer monitors, and a projection screen at the front.
What does the environment for in-person IT courses look like?We hold training courses in our own classrooms equipped with modern computer equipment for each participant and a large projection screen. Each workstation is fitted with a powerful computer for seamless practical exercises, and the environment supports a calm, friendly atmosphere during training.
IT classroom with desks, computer monitors, and a projection screen at the front.
Do I need to bring my own laptop to the classroom IT course?Our training rooms are fully equipped, so you do not need to bring your own laptop. A modern computer with all necessary hardware and software is ready for you at your workstation.
Sample ICT Pro certificate of successful completion of an IT training course.
Will you receive an official certificate after completing an IT course?Yes, upon successful completion of the training course, you will receive an official ICT Pro certificate confirming your participation and acquired technical skills. You can use it to verify your qualifications or add it to your professional profile.
Exterior view of the COMGUARD office building on Sochorova Street in Brno.
Where can you find our training center in Brno?The premises of the ICT Pro training center are located on the 1st floor of the COMGUARD building at Sochorova 38 in Brno. Positioned on the border of Žabovřesky and Komín, the location is easily accessible by both car and public transport.
Exterior view of the Opatov Park office building in Prague, Chodov.
Where can you find our training center in Prague?The premises of the ICT Pro training center are located on the 1st floor of the Opatov Park building at Líbalova 1, Prague 11 – Chodov. The location provides a comfortable environment for your education with convenient access.
Fully equipped kitchenette with a coffee machine, microwave, sink, and shelves with cups and glasses.
What facilities and refreshments are available to you during training breaks?Our training centers feature a fully equipped kitchenette for a comfortable break during your courses. The facilities include a coffee machine, microwave, kettle, and a wide selection of drinks and snacks.
Coffee station featuring an automatic coffee machine, yellow and white cups, glasses, and syrups.
What beverage refreshments are available during your course?A beverage station with a coffee machine, teas, syrups, and water is at your disposal throughout the entire training session. You can enjoy a coffee or another drink of your choice anytime during breaks.
Table with sweet pastries, fruit syrups, a water dispenser, and glasses set up for training participants.
What light refreshments are provided for you during the courses?During course breaks, participants can enjoy light sweet snacks, pastries, and fruit syrups to mix their own drinks. Fresh water dispenser and plates are also available for your convenience.
Wicker baskets filled with packaged savory snacks, sweet biscuits, and snack bars.
Should I bring my own snacks to ICT Pro training?There is no need to. A wide selection of savory snacks, sweet biscuits, and snack bars is available for you during breaks. Boost your energy for all-day focus right inside the training center premises.
Outdoor wooden terrace with green surroundings by the glass building of the training center.
Can you spend training breaks in the fresh air?Yes, an outdoor terrace is available at our training center. During breaks between learning sessions, you can relax in the fresh air in a pleasant green environment.
Spacious outdoor wooden terrace with seating and views of the surrounding area.
Where can you relax during course breaks?Our training center features a spacious outdoor terrace with seating options. During breaks between learning sessions, you can step outside to relax and recharge in the fresh air.