/Parcel

Parcel


Parcel

Blazing fast, zero configuration web application bundler

Get Started
GitHub

🚀 Blazing fast bundle times

Parcel uses worker processes to enable multicore compilation, and has a filesystem cache for fast rebuilds
even after a restart.

📦 Bundle all your assets

Parcel has out of the box support for JS, CSS, HTML, file assets, and more – no plugins needed.

🐠 Automatic transforms

Code is automatically transformed using Babel, PostCSS, and PostHTML when needed – even
node_modules.

✂️ Zero config code splitting

Using the dynamic import() syntax, Parcel splits your output bundles so you only load what is
needed on initial load.

🔥 Hot module replacement

Parcel automatically updates modules in the browser as you make changes during development, no configuration
needed.

🚨 Friendly error logging

Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem.

Hello World

Start with the entry HTML file for your application. Parcel follows the dependencies from there to build your
whole app.

✏️ index.html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

🛠 index.js


import main from './main';

main();

🛠 main.js


import classes from './main.css';

export default () => {
  console.log(classes.main);
};

💅 main.css

.main {
  
  background: url('./images/background.png');
  color: red;
}

Run parcel index.html to start a dev server. Importing JavaScript, CSS, images, and more just
works! 👌

Benchmarks

BundlerTime
browserify22.98s
webpack20.71s
parcel9.98s
parcel – with cache2.64s

Based on a reasonably sized app, containing 1726 modules, 6.5M uncompressed. Built on a 2016 MacBook Pro with
4 physical cores.

Original Source