Parcel Bundler: The Complete Tutorial

Set up a basic to-do list app by creating a new project folder and HTML, CSS, and JavaScript files, then reference them in HTML for future features and parcel integration.

Install Parcel and wire up a package.json by defining name, version, description, main, scripts, and development dependencies, then start the development server and open the app in the browser.

Explore how Parcel generates files during builds, including the cache folder and output bundles with HTML, JavaScript, and source maps.

Learn what assets are in parcel bundler, how types are bundled, and how to import json to render a to-do list in a web app.

discover how parcel handles less and sass preprocessors, including declaring variables, nested rules, automatic installation of dependencies, and migrating from less to sass in a project.

Configure postcss to add vendor prefixes automatically with autoprefixer, create postcss.config.js and a browserslist file specifying the last five versions, and verify shadow styling across browsers.

Learn how to refactor a single JavaScript file into ECMAScript 6 modules, exporting and importing data, UI rendering, and onload event handlers for a cleaner, scalable codebase.

Integrate jQuery into your application by installing via npm, wiring an event listener with the $ symbol, and updating the to-do list when you enter a new item.

Learn to use the latest JavaScript features through Babel, installing Babel and a pipeline-operator plugin to transpile modern syntax into widely supported JavaScript for immediate use.

Explore three image techniques in parcel: reference via img tag, import from JavaScript, and use as a background image in CSS, with hands-on examples like a to-do app.

Integrate Font Awesome into the to-do app by replacing the custom checkbox with a real checkbox, using a library and dom to display Font Awesome checkmark and update item status.

Integrate bootstrap into your application by installing via npm, importing bootstrap styles, and using the bootstrap alert component to display top of page notifications that auto dismiss after two seconds.

Integrate bootstrap JavaScript to display a confirmation modal when deleting items, import the bootstrap script, and wire event listeners to act on user confirmation.

Learn how production mode differs from development mode, enabling faster runtime, smaller bundles through output magnification, and environment variable production to disable development-only features, for building for production.

Add one line in package.json to build the application in production mode with Parcel, enabling minification and automatically using relative paths for generated files.

Learn how the NODE_ENV variable toggles production and development modes to enable or disable features, using Google Analytics as a production-only example and validating in production and development.

Learn how modern browsers cache JavaScript and CSS assets, and how Parcel automatically busts the cache with hashed file names to deliver fresh updates.

Learn how to clean the dist folder by using a parcel plugin saved in package.json that removes old bundles before building new ones, automating cleanup and reducing clutter.

Learn how tree shaking removes unused code from production bundles in parcel, reducing bundle size, demonstrated through a small project using two functions and a single import.

Apply tree shaking by importing an exported Lodish library function via ES6 modules. This reduces the production bundle size, though the feature is experimental and should be tested.

Learn to optimize images by configuring a build-time plugin that magnifies selected formats to reduce load times and shrink a 1.28 mb image to about 165 kb.

Remove unused css from production code with a tool that analyzes html, js, and css; run in production mode and verify the app still works.

Enable gzip compression for parcel bundler using a plugin to deliver compressed files via the accept-encoding header, which the browser decompresses before rendering.

Integrate the Express framework into a web application, generate an HTML file with its assets, and explore publishing the site by serving the app with Express or other technologies.

Integrate the Express framework into the application by building a simple web server that sends content to the browser via the response object and listens on a port.

Learn how to serve an HTML page in Express by reading index.html with path and fs, and sending its contents to the browser, while assets are not yet handled.

Learn to serve static files—css, javascript, and images—in an Express app by using the static middleware with a static folder, and update html references.

This video shows enabling Guiseppe and Berkely compression in the Express framework using middleware, serving pre-compressed static files, and validating size reductions in the browser.

Learn how code splitting and lazy loading with dynamic import in parcel let you load bootstrap on demand, reducing the initial JavaScript bundle and improving app performance.

Learn to integrate Parcel Bundler with React by creating a project, installing Parcel and React, configuring Babel, building a simple hello world component, and running development and production builds.

Learn to integrate Vue with Parcel by creating a small app from scratch. Set up package.json, src, index.html, and render a hello world component to the DOM.