DEV Community

Cover image for What's the diff? Snowpack vs Webpack
Christine Kim
Christine Kim

Posted on

3 1

What's the diff? Snowpack vs Webpack

Recently, I tried out a new project with Snowpack. I have always used Webpack in my projects, but it seemed like a good opportunity to try something new out. This post is a short read on Webpack and Snowpack, and a little talk about my experience with it.

First off, what is Webpack?
On its website, it is a module bundler. When web apps started getting much larger, Webpacks became the answer to the size of these dependencies and overall project size. Webpack goes through the packages you have in your project, and creates a dependency graph that contains modules that your web app needs to function. Pretty much, it's tasked with taking your JS files, imported NPM modules, images, CSS, other assets, and throw it into a build file that the browser can run. Every time you make a change, your files have to be re-bundled, making it quite tedious.

Then what's snowpack?
Snowpack, is much newer, coming on to the scene in 2019. It a front-end build tool for JS, and was created to be an alternative to webpack. Snowpack is able to be light weight by taking advantage of JavaScript's native module system, to only do the bare minimum. It uses ES modules to run within the browser, and only use modules when it's needed. There is also an ability to imports modules from CDN servers. If you don't need have a large request waterfall, and want to gave as little tooling as possible, then you would benefit to using Snowpack.

The project I wanted to make was a React app, and deploy it through GitHub pages. The setup was quite simple, and I found that the documentation on the Snowpack page to be really thorough. However, reading more up on it, I heard it wasn't recommended to use with a no configuration tool like create-react-app, because I needed to figure plugins and configure some of my settings to get it to work. (I made a template here if you want to avoid the pain that I went through setting up and making your Snowpack React app work with gh-pages). But wither than that, I found it was much quicker and help speed up my workflow for my small project.

Overall, I would recommend trying out Snowpack, since it's pretty easy to figure out how to get up off the ground with. Leave a comment if I missed anything on comparing the two, and what preference you have if any!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay