Combine Webpack with Gulp 4

Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp, and there are some pretty good reasons for that.

Still, the amount of JavaScript in our static projects is growing, so to compensate, let's make use of Webpack, while remaining in Gulp. In this article, specifically, Gulp 4. We'll use modern techniques to build an easily maintainable workflow, including the powerful and useful Hot Module Reloading (HMR).


Getting Started with CSS Modules

There isn't one single approach with CSS Modules to making the JavaScript templates, the CSS files, or the build steps to make them work. In this post, which is part of a series on CSS Modules, we'll look at one approach. The goal of this post is to get a CSS Modules project up and running.

Article Series:

  1. What are CSS Modules and why do we need them?
  2. Getting Started with CSS Modules (You are here!)
  3. React + CSS Modules = 😍

In the projects I work on, there is a requirement that CSS should never rely on client-side JavaScript to work, so the build step needs to process everything into working HTML and CSS before it is deployed. We'll be using Webpack, a build system and module bundler. In the next post, we'll focus on making the code below suitable for a real-life project that renders static HTML to the browser.

Let’s begin!