Learn how to replace Webpack with esbuild as the bundler for React applications created using Create React App in this 28-minute video tutorial. Discover how to speed up your development workflow by implementing a faster JavaScript bundler. Follow along as the instructor guides you through creating a React app, understanding build scripts, installing and configuring esbuild, handling inline SVGs with plugins, setting up a web server, and implementing hot reloads. By the end of the tutorial, you'll have a working React app using esbuild as the bundler, with improved development speed and efficiency.
Replace Webpack with Esbuild as Your Bundler with Create React App
Overview
Syllabus
- intro
- creating a react app with create-react-app
- understanding create-react-app build scripts
- installing esbuild
- understanding esbuild
- replacing cra build script with esbuild
- using plugings to handle inline svg's
- creating a build script including the esbuild-plugin-inline-image plugin
- starting our webserver with http-server
- fixing index.html public_url
- adding our bundles to the index.html
- importing react to app.js
- a working react app using esbuild
- fixing npm start with http-server
- using esbuild as a development server with esbuild serve
- hot reloads
- finale
Taught by
Chris Hay
