Webpack ​

Rspack & Turbo are successors to Webpack.

SWC, Esbuild & Vite are great too for some bundling tasks.

Plugins ​

• Webpack Summary - Webpack plugin for displaying a short summary at the end of the build process.
• add-asset-html-webpack-plugin - Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin.
• Webpack Extension Reloader - Webpack plugin to automatically reload browser extensions during development.
• React Refresh Webpack Plugin - Enable "Fast Refresh" (also previously known as Hot Reloading) for React components. (Tweet)
• ts-loader - TypeScript loader for webpack.
• Webpack External Import - Import() other chunks and modules from third parties, or other webpack builds themselves! At runtime.
• Speed Measure Plugin - See how fast (or not) your plugins and loaders are, so you can optimise your builds.
• react-imported-component - Bundler-independent solution for SSR-friendly code-splitting.
• Configs Webpack Plugin - Simplified AoT runtime config solution for your webpack builds.
• worker-plugin - Automatically bundle & compile Web Workers within Webpack.
• Critters - Webpack plugin to inline your critical CSS and lazy-load the rest.
• Optimize Plugin - Optimize your code for modern browsers.
• esbuild-webpack-plugin - Use esbuild as minifier for webpack.
• SVG sprite loader - Webpack loader for creating SVG sprites.
• Webpack Virtual Modules - Plugin that allows for dynamical generation of in-memory virtual modules for JavaScript builds created with webpack.
• responsive-loader - Webpack loader for responsive images.

Links ​

• Webpack: From apprentice to master book
• Awesome Webpack Perf - Curated list of webpack tools and plugins that help make the web faster.
• Building a Platform: Webpack and the Future by Sean Larkin (2018)
• Jetpack - Wraps webpack to create a smoother developer experience.
• Optimize your libraries with webpack - Using a library in your webpack project? Use these tips to make your bundle smaller.
• How to set up an advanced Webpack application (2019)
• inspectpack - Inspection tool for Webpack frontend JavaScript bundles.
• webpack autoconf - Tool to create personalized and optimized webpack.config.js
• Web Performance Optimization with webpack
• Building a Great Developer Experience: The Road to Parcel Version 2 (2019)
• Webpack Bundle Analyzer - Keep your webpack bundle optimized over time.
• Webpack Bundle Analyzer 2 - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
• @mixer/webpack-bundle-compare - Tool for comparing webpack bundle stats.
• Tobias Koppers's presentations
• Webpack Module Federation Examples
• Webpack and yarn magic against duplicates in bundles (2020)
• Webpack CLI
• Webpack 5 (HN)
• How to Set Up webpack 5 from Scratch (2020)
• webpack-merge - Provides a merge function that concatenates arrays and merges objects creating a new object.
• esbuild-loader - Speed up your Webpack build with esbuild.
• ESLint plugin for webpack
• webpack-chain - Chaining API to generate and simplify the modification of Webpack configurations.
• Webpack site code
• Advanced React and Webpack configuration (2020)
• Tips to Optimize Webpack (2020)
• Statoscope - Analyzes webpack stats and supplies the UI to display. (Web)
• webpack-nano - Tiny Webpack CLI.
• How to Migrate an App From Webpack to Snowpack (2021)
• Why we switched from Webpack to Vite (2021) (HN)
• Get autocompletion for your webpack config with one line of code
• Building a simplified webpack clone
• Understanding why our build got 15x slower with Webpack 5 (2021)
• Webpack Federation SSR (2021)
• Webpack to Vite - Convert a Webpack project to a Vite project.
• parcel-css-loader - Speed up your Webpack build with parcel CSS.
• Migrate From Webpacker to Esbuild (2022)
• GradeJS - Analyzes production Webpack bundles without having access to the source code of a website.
• forgetti-loader - Webpack loader that solves your hook spaghetti. Powered by forgetti which is inspired by React Forget.