JavaScript Bundling With Parcel

المعرفة:: JavaScript الحالة::مؤرشفة المراجع:: The Complete JavaScript Course 2022 From Zero to Expert

---

How to Use Parcel?

• To install Parcel npm i parcel --save-dev.
• To use it with local installation we need to use npx npx parcel index.html or npm scripts by adding a configuration like this in package.json, then it can be used using npm run X.

  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },

• Parcel can also do the same job as live-server.
• As Parcel bundles the code into one file, we no longer need to set <script type="module">.
• Parcel automatically uses Babel to transpile the code.
• Parcel can also import assets import icons from 'url:../img/icons.svg';.

Hot Module Replacement

Whenever a module is changed, Parcel will trigger a rebuild, and that new modified bundle will automatically get injected into the browser without triggering a whole page reload.

if (module.hot) {
  module.hot.accept();
}