Parcel: The Webpack successor?

A little history

Do you remember when there were no module bundlers for your fontend assets? Do you remember how hard it was to just cut your code into small pieces that you can easily reuse? I personnaly remember a tool named RequireJS that allows you to do that but your modules needed to be developed with RequireJS for RequireJS. These modules were what we called AMD (Asynchronous Module Definition). And then, another tool became very popular among frontend developers: Browserify. The idea of this tool was to use require() inside your frontend apps. That was awesome because the idea behind was to allow developers to import modules the same way as they do with NodeJS. So no more bower! NPM became the only package manager for dealing with your frontend and backend dependencies, and then your package.json became the only entry point of your app that gathers the dependencies and the scripts necessary to start and build your app. Since Browserify was good at handling JavaScript files, developers quickly need something more complete that can handle multiple kind of assets! So a few months after the first release of Browserify, Webpack was born with that idea in mind!

The complexity of Webpack

The principle of Webpack is fairly simple. You create a config file, that contains an entry point of your app. This entry point can import a different kind of assets like JavaScript or CSS files or even images. Webpack builds a dependency tree of these assets using loaders that indicate how Webpack can handle these different kinds of assets. And then Webpack produces an output file that is considered as your built assets. So on the paper Webpack is awesome, and it really is. But Webpack has a reputation for being complex, really really complex. So developers often try to reuse some exisitng configuration files without necessarily understand how Webpack really works. In my opinion, this complexity of webpack led developers to create some "generators" that allows you to create your projects without making the configuration by yourself. Create-React-App is one of them. Even Angular create something like that and is called Angular-cli.

Parcel

Yes, Parcel, is another module bundler. But the promise behind Parcel, is to be as simple as possible since it doesn't need any specific configuration file. It can bundle all your assets, supports code splitting and hot module replacement (HMR) by default. Unlike Webpack, Parcel also has a web development server built in. So to get started with Parcel, you just need to install it using npm:

npm install -g parcel-bundler

And then, you can use Parcel like this:

parcel index.html //This will run Parcel with its web server
parcel watch index.html //This will run Parcel without the web server
parcel build index.html //Bundle your app for production

By running these commands, Parcel analyzes the dependencies referenced in the index.html file and includes them in the output files. The dependencies can be any kind of assets (JavaScript, CSS, images...).

To illustrate the simplicity of Parcel, when you want to use a preprocessor like Sass, you don't need to add an extra configuration, you just need to install node-sass and then import you Sass file within your app and Parcel will take care of everything. You don't need something like a specific loader to handle this kind of files!

You can still use Babel presets to extend to possiblities of Babel. So you just need to create the traditionnal .babel.rc file. So, if you need for instance to use React, just install the env and react presets and then create the following .babel.rc file:

 // .babelrc
{
  "presets": ["env", "react"]
}

This is not so complicated, isn't it?

Another promise of Parcel, is to be fast, really fast. I have not use it in a large project, so I need to believe of the existing benchmark!

So, I really encourage you to have a look at this awesome project: https://parceljs.org/

Conclusion

Parcel is a new project and is really encouraging. Of course, it needs to prove its worth in a competitive domain where Webpack seems to have a head start on its competitors. Since Webpack seems well-suited for large projects, why not giving a try to Parcel for small and medium projects?