Parcel

Why?

Simpler to use than Webpack
Has a built-in live dev server, with hot module replacement
Let’s you create and use modules with import and export
Babel works right out of the box
Live reloading works with HTML, CSS and JS
Buils your projcect for you, default build directory is dist. You can change it with --out-dir
Build code gets automatically compiled and minified

With Yarn

1yarn global add parcel-bundler
2yarn init -y

or with NPM

1npm install -g parcel-bundler
2npm init -y

1  "scripts": {
2    "dev": "parcel src/index.html",
3    "build": "parcel build src/index.html --out-dir prod"
4  },

Parcel uses Babel @babel/preset-env to convert JavaScript for you. You can easily add more Babel plugis to the config and they’ll work with Parcel

1yarn add @babel/plugin-proposal-class-properties

Create a .babelrc and add your plugins

1{
2	"plugins": [
3		"@babel/plugin-proposal-class-properties"
4	]
5}

1yarn add sass

import your Sass file in one of the JS files

1import '../styles/main.scss'

1yarn add react react-dom
2yarn add --dev parcel-bundler

1// package.json
2"scripts": {
3  "start": "parcel index.html"
4}

issue 1: Parcel is stripping (inline) <svg> sprite out of an HTML doc when running build
issue 2: Parcel is nesting <svg> code, i.e. nesting paths and groups inside one another when they are supposed to be siblings, not parent-child

Parcel by default doesn’t support inline <svg>. You can either use fs.readFileSync to load the file, or use a plugin like parcel-plugin-inlinesvg

1yarn add parcel-plugin-inlinesvg

That plugin didn’t work. It replaced the <img> with the .svg files with some .js code that failed to load.

What did work was adding two config files for PostHTML and htmlnano that disabled minification of svgs and some stuff about tags

1// .posthtmlrc
2{
3  "recognizeSelfClosing": true,
4  "lowerCaseAttributeNames": false
5}

1// .htmlnanorc
2{
3  minifySvg: false
4}