webpack has been a developer favorite for years because of its effective module bundling capabilities. However, 2019 saw the introduction of Snowpack, a lighter alternative to webpack that promised increased speed and ease of use. This article will walk you through a brief comparison between these two tools and provide a step-by-step guide to getting started with Snowpack.
What is webpack?
Other benefits of webpack include:
- Streamlining and elimination of unused assets
- Flexible control over asset processing
But the powerful complexity of webpack also comes with some drawbacks:
- Difficult configuration process
- Steep learning curve
- Slow build times
What is Snowpack?
How does Snowpack compare with webpack?
Unlike webpack, Snowpack doesn’t need to go through an entire rebuild and re-bundle process every time you modify and save an asset file. Webpack’s time-intensive build process accounts for the delay you experience between saving your files and seeing your changes load in the browser. A few developers have even reported wait times as long as 12 minutes for larger apps.
Some people have devised clever workarounds for boosting the speed of webpack, such as upgrading the UglifyJsPlugin, jettisoning image loaders, rethinking caching strategies, and switching from node-sass to sass-loader, to name a few.
For those who can’t afford to take days out of your project schedule to analyze build performance and cobble together an optimization plan, Snowpack is a better option.
How does Snowpack work?
Snowpack lets you work in a lightning-fast, unbundled development environment and even lets you keep your final builds unbundled and runnable. You also have the option to support bundled builds when it comes time to roll your app out to production. All you have to do is add the right plugin for your favorite bundler, or even write your own using the Snowpack plugin API.
In short, Snowpack offers the following advantages over a traditional bundler tool like webpack:
- Changes written instantly to the browser with no wait time for rebuilds
- Efficient cache for no duplicate downloads
- Ability to import modules from CDN servers, thanks to Snowpack’s ESM foundation
- Simple and easy configuration process
- Easy learning curve
To learn more about how Snowpack stacks up against webpack, check out our blog post.
Get started with Snowpack
You’ve done the research, you’ve compared the tools, and you’ve decided that Snowpack is the one for you. So how do you get started? Luckily, you’ve come to the right place.
In the rest of this article, we’ll guide you through the steps to migrate your development environment and get your app up and running with Snowpack.
Before you begin, check to ensure you have what you need to complete the setup. Thankfully, Snowpack’s requirements are minimal. To develop with the tool, you need:
- A modern browser that supports the ES module syntax, such as a recent release of Chrome, Firefox, or Edge
Tip: The modern browser requirement applies only to your development environment. Once you’ve created your final build with Snowpack and pushed it to production, users can view your site in any browser, modern or legacy.
1. Install Snowpack
You can use these installation commands:
id="globalinstallation">global installation npm install -g snowpack local installation per project npm install --save-dev snowpack
Snowpack’s creators recommend that you install locally rather than globally when possible.
local installation per project yarn add --dev snowpack
2. Start the Snowpack command-line interface (CLI)
There are three ways that you can run the Snowpack CLI locally:
- Using the
- Using the npm command:
- Using the yarn command:
3. Initialize an app using a Create Snowpack App template
To create a new app project, use Create Snowpack App (CSA). With CSA, you get a new initialized app configured using one of Snowpack’s app templates. Snowpack provides templates for React, Vue, Svelte, and other popular frameworks.
Here’s a sample initialization command that uses Snowpack’s template for React:
npx create-snowpack-app new-dir --template [@snowpack/app-template-react] [--use-yarn]
You can find a list of official CSA templates on the Snowpack documentation page.
4. Migrate your existing app to Snowpack
Use the app you created with a CSA template as the starting point for migrating your existing app.
Snowpack supports most of the technologies used for web development nowadays, such as Babel, PostCSS, and Create React App, among others. Chances are, your app already uses one of these supported technologies, so the migration to Snowpack should be a snap.
In fact, if you have an existing Create React App project, you can run it directly through CSA without making any changes at all.
To migrate your app, begin by initializing a new app project using the CSA template of your choice (see the previous section for instructions). Next, copy over all the files from the
public directories of your existing app site. Now, start your development server and load the site locally using this command:
Now it’s time to troubleshoot any issues you might run into. If you get stuck, check the Snowpack docs for help.
Finally, when you’re ready, build your site for production:
While not technically as powerful as webpack, Snowpack offers a faster, more user-friendly alternative that provides all the functionality most developers need. If you’re looking to simplify or speed up your workflow, Snowpack can get the job done.
LogRocket: Full visibility into your web apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.