How to replace webpack with parcel in a CRA project?

Question

I have a CRA project setup and it's working fine. However I'm considering ejecting it and replacing Webpack with Parcel.js. After ejecting, what should I do? Is the index.js file in the src folder the only file I need for Parcel?

Answer 1

Your life will be easier if you don't eject (fewer files to delete). You also don't need webpack, Parcel will be your bundler.

If your setup is still close to what CRA gives you out of the box, here's all you have to do:

1. Uninstall react-scripts: $ npm rm react-scripts

2. Install parcel-bundler: $ npm i -D parcel-bundler

3. A key difference between CRA and Parcel is that in CRA your entry is always your src/index.js and public/index.html is more like a template. In Parcel you can have any .js file as entry, but also any .html file, which is awesome. So move all files from public to the src directory, and you can go ahead and delete public folder since everything now is source. Since your new entry is index.html lets make it point to the files correctly.

4. Remove the template variable %PUBLIC_URL% in your index.html and point to the files directly. Lets say if you placed index.html and file.ext both at the root of your src folder, href="%PUBLIC_URL%/file.ext" should become href="./file.ext".

5. CRA injects a <script /> tag to the end of your html automatically, but in Parcel you need it specified so it knows what to bundle. So add <script src="./index.js" /> to the bottom of your body tag file, right before </body> (if you put it above your #root it won't work).

6. Replace your CRA package.json tasks with Parcel's:

Change your scripts from

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

to

"scripts": {
  "start": "parcel src/index.html",
  "prebuild": "rm -rf dist/",
  "build": "parcel build src/index.html"
}

Parcel has no eject and doesn't do test. Your start and build command will both output files to your dist folder, that's why it is a good idea to delete it before building. Also, add .cache and /dist to your .gitignore.

That's it. Let me know if I missed anything.