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
  • Advanced customizations
  • Tons of exercices and practice

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
  • extend Webpack to address their in-house needs

Curriculum

  1. First steps

    • Core concepts
    • Handling JavaScript
    • Handling styles
    • Handling images
    • 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

    • Transpiling only what’s needed
    • Restricting what loaders look at
    • Caching loader results
    • Picking appropriate sourcemaps
    • Externalizing third-party code with externals
    • Parallelizing the build
    • Parallelizing some loaders
    • DllPlugin and DllReferencePlugin
  5. Optimizing the bundle’s performance

    • Optimizing file count and sizes
    • Optimizing caching
    • Bundle splitting
    • Code splitting
    • Analyzing bundle performance
    • Producing a library rather than an app
  6. Webpack + React

    • During development
    • In production
  7. Customizing Webpack

    • Subtle configuration tweaks
    • Writing our own loaders
    • Writing our own plugins

Next sessions

(Sauf indication contraire, chaque date dispose d’au moins 4 places encore libres)

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

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.

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

The training takes place in a private, commodious, well-lit, air-conditioned room with great functionality and ample comfort. All our venues are easily accessible by public transit and wheelchair-accessible.

Located in Paris, near Nation, they can be reached through no less than 5 subway lines, 1 RER line and 5 bus lines:

  • Subway Line 2 Philippe-Auguste or Alexandre Dumas
  • Subway Line 9 Charonne or Rue des Boulets
  • Subway Line 8 Faidherbe-Chaligny
  • Subway Line 1 Line 6 RER Line A Nation
  • Bus Line 26 Line 57 Line 86 Nation
  • Bus Line 56 Charonne-Voltaire or Boulets-Montreuil
  • Bus Line 76 Charonne-Philippe-Auguste
Delicious Insights

83 avenue Philippe-Auguste
75011 Paris

See on Google Maps

You can also find a number of parking areas nearby.

  • Every trainee brings their own laptop or workstation.
  • Internet access is provided through a broadband connection. Training rooms offer a Wi-Fi access and, for the oddball situation, a wire-based Ethernet infrastructure.
  • Not living in the Paris area and looking for lodging? Why not go with Airbnb? They even have a business offering.
  • Training sessions range from 4 to 10 trainees.

Typical daily schedules for the training, for a daily total of 7 hours hence a total of 21hr of training, are:

  • 9h45Welcome, breakfast (hot and cold beverages, French pastries)
  • 10hTraining starts
  • 12h30Lunch (included)
  • 13h45Training resumes
  • 16h15Break
  • 16h30Training resumes
  • 18hDay close

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


Our main venue, for multi-client trainings (click to zoom):

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.