Webpack training

At last, a training course that goes beyond the well-known basics of Webpack!

In just a couple years, Webpack has risen to become the must-know bundler, mostly thanks to its peerless abilities of fine-tuned optimization, as well as its innovative Hot Module Replacement system. It is now at the heart of most web project scaffolders, recent tutorials, etc.

However, it is all too easy to be intimidated, or outright fended off, by the sheer volume of its features and capacities, the mess that used to be its documentation, and the sometimes contradictory information found online. This training exists to change that, and provide trainees with rock-solid understanding of the tool and its behavior, with emphasis on performance: developer performance, building performance, and bundle performance within the webapps that use them.

  • Step-by-step discovery
  • All the classic use cases
  • Maintenable setup
  • Composable configuration
  • Optimal DX
  • Fine-grained optimizations
  • Up-to-date on Webpack 5

Goals

The Webpack training aims to empower trainees to:

  • gain in-depth understanding of Webpack’s architecture
  • embed any type of resource in their builds
  • maximize their productivity by optimizing incremental builds
  • finetune their web apps’ startup time with careful optimization
  • leverage all the new and improved stuff in Webpack 5

Curriculum

  1. First steps

    • Core concepts
    • Handling JavaScript
    • Webpack 5: async modules
    • Handling styles
    • Handling images
    • Webpack 5: asset modules
    • Webpack 5: extended request protocols
    • Handling fonts
    • Other usual sources
    • Adjusting for production bundling
  2. Maintaining your configuration

    • webpack-merge
    • Splitting configuration into parts
    • Various approaches to configuration splitting
  3. Optimizing the developer experience

    • Making the most out of the development server
    • Embedding into our own servers
    • Hot Module Replacement
    • Plugins and useful wrappers
  4. Optimizing the building performance

    • Webpack 5: Persistent Caching
    • Transpiling only what’s needed
    • Restricting what loaders look at
    • Webpack 5: imports and exports fields in package.json
    • Picking appropriate sourcemaps
    • Externalizing third-party code with externals
  5. Optimizing the bundle’s performance

    • Optimizing file count and sizes
    • Optimizing cacheability (incl. Webpack 5 upgrades)
    • Webpack 5: better code generation and targeting with target
    • Tree Shaking (incl. Webpack 5 upgrades)
    • Bundle splitting
    • Code splitting
    • Webpack 5: multi-bundle collaboration with Module Federation
    • Analyzing bundle performance
    • Producing a library rather than an app
  6. Migrating to Webpack 5

    • Leverage deprecation warnings
    • IgnorePlugin, the usual suspect
    • Beware: Node.js auto-polyfilling is gone!
  7. Customizing Webpack

    • Subtle configuration tweaks

Next sessions

    (Unless otherwise stated, every session has 4+ seats still available, and is in French; you can naturally book custom dates for your company using the link further below.)

    Pricing

    You registerPer trainee
    1 to 2 trainees€1,500 net
    3 to 5 trainees€1,350 net
    6+ trainees€1,200 net
    Loyalty discount€1,275 net

    Need an in-house / custom training?

    For a bespoke training, tailored to your needs, either at your office, in ours or remotely, please describe your context and needs using the following link.

    Usually, the core training cost for doing this training in-house, which is a flat fee for up to 10 trainees, is €9,000 net. For international sessions with fewer trainees, we can trim that down: talk to us!

    Request my in-house / custom training

    Intended audience and pre-requisites

    The Webpack training mostly targets web developers and Dev Ops.

    Prior knowledge of JavaScript, even cursory knowledge, is mandatory. Prior experience of other build / bundling tools is a bonus but by no means mandatory. No prior knowledge of Webpack is required.

    Unless otherwise specified, predefined-dates, multi-client sessions are held in French, so attendees should be reasonably fluent. You are naturally welcome to book custom dates for your company using the link above.

    Deliverables

    When the training starts, trainees receive all the related slides and supporting material in a web-based format, so they can easily follow along.

    Once the training is done, they also get an extremely content-rich debrief e-mail, a reference archive with all finalized codebases (fully annotated and tested), all related slides and various complementary resources.

    Logistics

    • Sessions run 7hr a day, or 4hr12 a half-day, adding up to 14hr, 21hr or 28hr.
    • Full days run from 9:30 to 12:30 and 14:00 to 18:00, half-days run from 13:48 to 18:00.
    • (For or U.S. friends, that's 9:30a-12:30p / 2p-6p and 1:38p-6p Paris time, respectively.)
    • For custom dates booked specifically by your company, the schedule can be adjusted to better suit your needs. In particular, we can use half-days locked on reasonable hours in your timezone, e.g. 9a-12:30p EST or 8a-11:30a PST.
    • Every trainee uses their own laptop or workstation.
    • Training sessions range from 3 to 10 trainees.

    You can find all the details and modalities of registration, payment, cancellation and refunding in our Terms of Sale, along with our Conduct Policy.

    Trainer

    Christophe Porteneuve

    Christophe Porteneuve

    Christophe has been doing professional web work since 1995. He co-created Europe’s first production JSP portal in 1999, moving to J2EE before going with Ruby, Rails and finally Node.js.

    A best-selling author of“Bien développer pour le Web 2.0” (“Best practices for modern web development”) at Eyrolles, he also wrote the reference book “Prototype and script.aculo.us” at Pragmatic Programmers, articles in various online magazines (most notably the widely-acclaimed A List Apart), and speaks at a number of conferences big and small.

    In France, Christophe enjoys a solid reputation of expertise in the areas of front-end web dev (most notably JavaScript), Node.js, Git and Rails.

    Christophe is the founder and CTO of Delicious Insights.