webpack

Why would I use a Webpack?

Gonzalo García takes a crack at why webpack (not capitalized like npm) exists at all. No particular disagreements here, but here's my crack at it...

  • We use webpack because we need to import stuff from place;. This is a good pattern. We can use webpack to interpret those statements, as native support for them isn't what it needs to be yet, and it's not clear whether the native version will be smart for performance or not (probably not, at the scope of projects webpack is usually used for).
  • We use webpack because we know we need to concatenate and compress our JavaScript anyway, and managing load order isn't something you wanna handle manually.
  • We use webpack because of npm. Powerful features are a yarn or npm i away and so our projects are loaded with stuff to import.
  • We use webpack because we're sure it performs fancy magic that results in good performance-related things for our websites. We cross our fingers we have that right, and we've done our part right.
  • We use webpack because there is a hive mind in this industry and it leads to a lot of us hopping on the trains with the most people on them, and people are hanging out of the windows of the webpack train.

I'm very very (very) far from being a webpack expert, but I essentially get it, especially after the screencast Sean Larkin and I did right here, and I know enough my projects benefit from it.

#156: Let’s Talk About Webpack

Sean Larkin joins me to talk about Webpack!

I doubt I'm alone in being a bit confused about what the heck Webpack is and does. Even if you're actively using a project that uses it! We're just going to scratch the surface here, but hopefully while talking it out in a way that will make sense to you.

One thing that helps me think about (a little, anyway, I'm no expert) is that while you do need to configure Webpack, you aren't telling it specific instructions like "take this file and this file and squish them together". It gets those instructions from your code itself, because Webpack actually reads your code and follows the dependency needs it finds.

Introduction to Webpack: Entry, Output, Loaders, and Plugins

Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices.

Webpack has gained popularity in the last years because of its power and scalability, but some developers found its configuration process confusing and hard to adopt.

(more…)

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).

(more…)

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!

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag