Webpack is the most popular JavaScript build tool for the last few years because of its flexible bundling configuration and the large amount of custom plugins it officially supports for different file types.

The main purpose of using Webpack is to take all of your JavaScript files, along with modules imported from NPM, images, CSS, and other web assets, and bundle them all together into one build file that can be run by the browser.

Webpack bundling in a nutshell. Source

But Webpack is also a complicated tool with a steep learning curve because its flexibility means it has so many features and fits so many use cases. Furthermore, Webpack needs to rebundle and rebuild your entire JavaScript application even when you make just a small change on a single file. Without a good understanding of how Webpack works, it might take more than 30 minutes in order to build an application.

But then again, Webpack was released in 2014. At that time, the browser support for the EcmaScript Module (ESM) import and export syntax is virtually non-existent, so the only way to run modern JavaScript in the browser was to grab all modules in your project and bundle them as one.

There are other processes involved along the way, such as transpiling JavaScript from a newer version into an older version with Babel so that the browser can run the application. But the main idea for using Webpack was to help create the best developer experience while enabling JavaScript developers to use modern features (ES6 and up).

ESM syntax is widely supported by all major browsers today, so bundling your JavaScript files together is no longer mandatory for running the application on the browser.

Unbundled development with Snowpack

Snowpack is a JavaScript build tool that takes advantage of the browser support for ESM so that you can build and ship individual files to the browser. Each file built will be cached, and when you change a single file, only that file will be rebuild by Snowpack.

Snowpack serve your files unbundled. Source

Snowpack development server is also optimized to only build a file once it’s requested by the browser, which allows Snowpack to start instantly (< 50ms) and scale up to large projects without slowing down. I’ve tried it myself and my server started in 35ms:

Snowpack dev server startup

Snowpack build process

Snowpack will deploy your unbundled application to production by default, but you probably want to implement build optimization techniques like minification, code-splitting, tree-shaking, lazy loading, and more.

Snowpack also has support for bundling your application for production build by connecting to Webpack using a plugin. Now since Snowpack already handles the process of transpiling your code, your bundler (Webpack) will only build common HTML, CSS, and JavaScript files. This is why you don’t need complicated Webpack configuration for the bundling process.

Finally, you can also set the list of browser versions you’d like to support by setting the browserslist property of your package.json file:

/* package.json */
"browserslist": ">0.75%, not ie 11, not UCAndroid >0, not OperaMini all",

The property will be picked up automatically when you run the snowpack build command to build the project for production environment. Snowpack doesn’t perform any transpilation when building for development, but this shouldn’t be a problem because most of the time you will develop using the latest browser version.

Getting started with Snowpack

To start using Snowpack, you can immediately create a Snowpack application using Create Snowpack App (CSA)and NPX. For example, you can create a starter React application with CSA with the following command:

npx create-snowpack-app react-snowpack --template @snowpack/app-template-react

A new react-snowpack folder will be created and bootstrapped with minimum dependencies:

{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "web-test-runner \"src/**/*.test.jsx\"",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "prettier --check \"src/**/*.{js,jsx}\""
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@snowpack/plugin-dotenv": "^2.0.5",
    "@snowpack/plugin-react-refresh": "^2.4.0",
    "@snowpack/web-test-runner-plugin": "^0.2.0",
    "@testing-library/react": "^11.0.0",
    "@web/test-runner": "^0.12.0",
    "chai": "^4.2.0",
    "prettier": "^2.0.5",
    "snowpack": "^3.0.1"
  }
}

You can immediately run the application with npm start command. The local development server will be opened at port 8080. The CSA template for React is very similar to Create React App’s default template:

React default page for CSA

Snowpack supports many official templates for popular libraries like React, Vue, and Svelte. You only need to add the --template option to the command.

Conclusion

You should be able to use a bundler because you want to, and not because you need to.
- Snowpack documentation

Webpack and Snowpack was created years apart, and although Webpack has been the most popular choice for bundling JavaScript modules, the browser support for ESM modules has opened a new way to develop web applications.

With the power to enable unbundled development and quickly rebuild the application in development, Snowpack is an exciting alternative to Webpack that’s easier to use for building JavaScript applications. It also allows you to use Webpack for bundling your production build, enabling build optimization techniques to be implemented for your project.

Be sure to checkout Snowpack documentation for more information.