All Aboard the Bundle Train: Choo Choosing Webpack

hotpizzas

Drupal modules create an amazing ecosystem where you can include just the functionality you need. However, when it comes to front-end development, we package it all up and move on. What if it doesn’t have to be that way? What if we had a modern bundling and build tool that allowed us to modularize all our front-end assets?

Say hello to Webpack.

Webpack is a module bundler that tackles all your front-end assets, from JavaScript to CSS and even imagery. It also runs common tasks most associated with Grunt and Gulp like linting and concatenation. Webpack even handles all your dependencies so you can rest assured you’re getting the leanest, most performant build from your code.

In this session, we’ll explore Webpack from a Single-Page Application perspective and cover:

  • Producing a starter Webpack configuration file for development
  • Understanding basic concepts like entry, output and loaders
  • Setting up tasks like linting
  • Utilizing the power of hyper-componentization with JavaScript import and CSS modules
  • Creating a production configuration file to have your build ready to go

 

Session Track

Front End

Experience Level

Intermediate

Drupal Version