webpack-plugin-utilities

webpack-plugin-utilities

Installation

npm install @rushstack/webpack-plugin-utilities --save

Overview

This is a collection of utilities for writing webpack plugins

Usage

VersionDetection

import { VersionDetection } from "@rushstack/webpack-plugin-utilities"

class MyExampleWebpackPlugin {
  constructor() {
    this.pluginName = "MyExampleWebpackPlugin"
  }

  apply(compiler) {
    if (VersionDetection.isWebpack3OrEarlier(compiler)) {
      throw new Error(`This plugin does not support webpack 3 or below.`)
    }

    const isWebpack4 = VersionDetection.isWebpack4(compiler);

    if (isWebpack4) {
      compiler.hooks.compilation.tap(this.pluginName, (compilation) => {
        // ....
      });
    } else {
      compiler.hooks.compilation.tap(this.pluginName, (compilation) => {
        // ...
      });
    }
  }
}

Testing

getTestingWebpackCompiler

import { getTestingWebpackCompiler } from "@rushstack/webpack-plugin-utilities"

describe("MyPlugin", () => {
  it("should run", async () => {
    const stats = await getTestingWebpackCompiler("./src/index.ts");

    expect(stats).toBeDefined();
  });
});

getTestingWebpackCompiler with additional configuration

If you want to pass in additional configuration to the webpack compiler, you can pass it in as the second parameter to getTestingWebpackCompiler.

import { getTestingWebpackCompiler } from "@rushstack/webpack-plugin-utilities"

describe("MyPlugin", () => {
  it("should run", async () => {
    const stats = await getTestingWebpackCompiler("./src/index.ts", {
      mode: "production",
    });

    expect(stats).toBeDefined();
  });
});

getTestingWebpackCompiler with virtual filesystem

If you want to be able to read, analyze, access the files written to the memory filesystem, you can pass in a memory filesystem instance to the memFs parameter.

import { getTestingWebpackCompiler } from "@rushstack/webpack-plugin-utilities"
import { createFsFromVolume, Volume, IFs } from "memfs"
import path from "path"

describe("MyPlugin", () => {
  it("should run", async () => {
    const virtualFileSystem: IFs = createFsFromVolume(new Volume());
    const stats = await getTestingWebpackCompiler(
      `./src/index.ts`,
      {},
      virtualFileSystem
    );

    expect(stats).toBeDefined();
    expect(virtualFileSystem.existsSync(path.join(__dirname, "dist", "index.js"))).toBe(true);
  });
});

Links

• CHANGELOG.md - Find out what's new in the latest version

@rushstack/webpack-plugin-utilities is part of the Rush Stack family of projects.