Parcel

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

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

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

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

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

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 another component
import main from './main';

main();

🛠 main.js

// import a CSS module
import classes from './main.css';

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

💅 main.css

.main {
  /* Reference an image file */
  background: url('./images/background.png');
  color: red;
}

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

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