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.

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.

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.

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 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.

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 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.

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 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.