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()],
};

Run webpack with ProfilingPlugin
Go to Chrome, open DevTools and go to the Performance tab
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

CopyWebpackPlugin - Copies assets from a public folder

Last update: August 12, 2023
Created: May 27, 2023