Skip to content

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();  
}  

Last update : August 14, 2023
Created : August 23, 2022

Comments

Comments