DEV Community

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

What's the diff? Snowpack vs Webpack

Christine Kim
Software Developer. Teach me internet!
・2 min read

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!

Discussion (0)