Skip to content

Plugins

Plugins extend Webpack's functionality, below is a handful of commonly used ones

HTMLWebpackPlugin

HTMLWebpackPlugin simplifies creation of HTML files to serve your webpack bundles

Installation

pnpm i -D html-webpack-plugin

Usage

webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: "My app",
        }),
    ],
};

Setting up with React

main.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.createElement("div");
document.body.appendChild(rootElement);

const root = createRoot(rootElement);
root.render(<App />);

ProfilingPlugin

Use the ProfilingPlugin

webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [new webpack.debug.ProfilingPlugin()],
};
  1. Run webpack with ProfilingPlugin
  2. Go to Chrome, open DevTools and go to the Performance tab
  3. Drag and drop the generated file (events.json) into the profiler

ReactRefreshWebpackPlugin

ReactRefreshWebpackPlugin enables "Fast Refresh" for React components.

Installation

pnpm i -D @pmmmwh/react-refresh-webpack-plugin react-refresh

Usage

webpack.config.js
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

const isDevelopment = process.env.NODE_ENV !== "production";

module.exports = {
    mode: isDevelopment ? "development" : "production",
    devServer: {
        // Enable hot reloading
        hot: true,
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "swc-loader",
                        options: {
                            jsc: {
                                transform: {
                                    react: {
                                        // swc-loader will check whether webpack mode is 'development'
                                        // and set this automatically starting from 0.1.13. You could also set it yourself.
                                        // swc won't enable fast refresh when development is false
                                        refresh: isDevelopment,
                                        // Enable the new JSX runtime module (e.g. `react/jsx-runtime`)
                                        runtime: "automatic",
                                    },
                                },
                            },
                        },
                    },
                ],
            },
        ],
    },
    plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
};

Other Plugins


Last update: August 12, 2023
Created: June 3, 2023