Webpack training

This course is taught 100% remote

Last updated on October 25, 2021, 11:28pm

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 Webpack 5's new caching and parallelization mechanisms
  • use Webpack 5's new optimizations
  • work with Webpack 5's module federation

Intended audience

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. You should:

  • Know the fundamentals of HTML as described here
  • Know the fundamentals of JavaScript: variables, data types, loops, functions.

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.

Pre-requisites

There is no pre-requisite for this training course (as in, verifiably acquired knowledge, through degrees, certifications, tests, etc.).

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

Un p'tit document ?

Imprimer ou télécharger en PDF le programme et les infos

Logistics

  • Every session is held synchronously, “live,” including remote sessions. This is not about pre-recorded videos.
  • We are currently not scheduling new multi-client in-room sessions before, at the earliest, April 1st, 2022.
  • Comprehensive course material is provided, acting as a common thread. It usually includes numerous slides and starter codebases or repositories for every exercise and lab.
  • Trainees can ask questions at any time.
  • Sessions always alternate between theory and hands-on labs, in short intervals (5 minutes to 1 hour).
  • Hands-on periods rely on real-world use-cases (which can be bootstrapped through starter codebases, Git repositories or online assignment labs).
  • Hands-on periods may be completed individually or as sub-groups that may vary from one period to the next, to foster pair programming and collaboration.
  • Remote sessions use a Zoom recurring meeting, accessible through a provided link using both the installed app and the pure-web, no-install client. They mostly use features such as video thumbnails, screensharing, chat, breakout rooms and possibly quizzes, annotations and whiteboards.
  • Sessions span 5 consecutive afternoons, adding up to 21 hours of class.
  • The schedule typically runs from 13:48 to 18:00.
  • 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.
  • Training sessions range from 3 to 10 trainees.

Deliverables & assessments

  • Every session half-day requires attendance signing (paper sheet or digital tool). For remote sessions, should a trainee fail to submit their entire attendance sheet in due time, Zoom participant logs will be considered authoritative.
  • At the beginning of every day's first period, we run a “debrief”: during about half an hour, we help collectively resurface skills and knowledge first tackled on the previous day. This helps put everyone back “in the zone,”, consolidate learning and boost group dynamics.
  • Throughout the course, assessment of skill acquisition is done through the successful completion of hands-on labs (exercises, mini-projects, labs, use cases, etc.). Interactive quizzes may supplement this. The trainer remains available for any question during hands-on periods.
  • Should a trainee exhibit significant difficulty, the trainer may opt to provide one-to-one mentoring for a while using the trainee's computer as a working base. This also applies to remote sessions using Zoom's dedicated features (e.g. one-to-one / individual assistance).
  • When the session ends, every trainee may request a completion certificate (or at least attendance certificate) and, for remote sessions financed by a French institutional entity, we issue a standardized completion certificate in order for financing to be able to proceed smoothly.
  • Once the training is over, every trainee receives a link to an online “hot” feedback survey, so they can express, among other things, whether they feel they achieved the stated goals of the training (or believe these will be achieved in the short term).

During the session, trainees receive at the start of every period access to:

  • all the related slides and supporting material in a web-based format, so they can easily follow along,
  • the starter repository for the common-theme app developed throughout the course.

Once the training is done, they also get:

  • an extremely content-rich debrief e-mail,
  • a reference archive with all related slides, finalized codebase with full documentation and tests, and various complementary resources.

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.

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

    (Any ongoing discount or special offer is not reflected here, but will be automatically applied in the registration form.)

    Need an in-house / custom training?

    For a bespoke training, tailored to your needs, either at your office, some other place 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

    Hardware & software requirements

    • Use a computer of sufficient performance (and provide it for single-client, in-room sessions, so ideally a laptop)
    • Remote sessions: this computer must feature a webcam, mic and audio output.
    • Remote sessions: use an internet connection with sufficient bandwidth (1Mbps+, ideally 5Mbps+), both incoming and outgoing.
    • Remote sessions: be able to run Zoom, either as a desktop install or as the pure-web client. You can test the installed software's configuration here.

    Registration & deadlines

    Regardless of the modalities you're looking for (single- or multi-client, in-room or remote), your initial request (for quotation or contract) should be made online from the training’s web page. You can find further up contract request links for every available multi-client session, a proposal request button for a single-client session, and for any other enquiry can use the contact button further below. Please favor our online forms as they speed up processing by avoiding numerous e-mail back-and-forths in order for us to get all your necessary information.

    For multi-client, fixed-date sessions, we reply to quotation or contract requests within at most 2 business days (and usually within minutes). For single-client, custom sessions, we usually get back to you within 3 business days to fine-tune your requirements and create a bespoke offer.

    The e-mails we send to provide quotations or contracts, as well as our online training pages, provide a link to an online survey prospective trainees can use for fit-for-needs assessment; this information should get to us ASAP, ideally before contract signing, so we can verify our training offer is a good match for the audience.

    Summons are sent by e-mail no later than 7 days prior to the session, at which time a potential cancellation decision (usually because two few trainees registered) is made. If the session is guaranteed ahead of that deadline, we can send your summons earlier at your request.

    For multi-client sessions, you can register online (requesting a contract and sending it back signed by e-mail) until the day before the session starts, provided the required amount of seats remain free. If you finalize your registration after the usual summons-sending deadline, your summons are sent immediately by e-mail.

    However, when French nationals contractualize with us in their personal capacity, French law mandates a withdrawal period (10 calendar days for in-room sessions, 14 calendar days for online sessions). In order to allow such clients to register later than this, they are provided an opt-in choice in their contract request online form to waive their withdrawal rights if the schedule requires it.

    For French client entities applying for third-party financing (e.g. OPCOs, Pôle Emploi, Regions, EU), it is imperative that financing agreements be sent to Delicious Insights no later than the last day of the training session. Should financing be denied or only partially provisioned, the client is liable for payment of the balance of the fee.

    You can find more information on the details of registration, cancelling and getting refunds in our Terms of Sale.

    Ratings

    • 45 trainees
    • 17 ratings
    • 91% trainee satisfaction en Teaching skills
    • 100% trainee satisfaction en Expertise
    • 93% trainee satisfaction en Logistics

    Disabilities & special needs

    The French law dated September 5, 2018 for “freedom to choose one’s professional future” aims to facilitate accessing and retaining a job for people with disabilities or special needs.

    Delicious Insights is very keen to help everyone, regardless of their particulars, move forward professionally.

    We can often adapt the modalities of our trainings to fit your needs: let's just review your situation together.

    Do feel free to get in touch with our point person for Disabilities, Christophe Porteneuve, by e-mail or phone.

    Do feel free to get in touch with our point person for Disabilities, Christophe Porteneuve, by e-mail at handicap@delicious-insights.com or phone at +33 662 059 656.

    A question, a concern?

    Don’t fret, we’re sure to have answers to help put your mind at ease and get a clearer picture. So let’s talk!

    Get in touch

    Get in touch by e-mail at contact@delicious-insights.com or call us at +33 662 059 656.