webpack-plugin-istanbul

webpack-plugin-istanbul

Minimal Webpack5 plugin for instrumenting code coverage using istanbul

Table of Contents

• Getting started
• How it works
• Configuration
  • Plugin Example
  • Loader Example
• Credit

Getting started

Install the library:

yarn add webpack-plugin-istanbul -D

How it works

You have the option to choose between a plugin and a loader to instrument your code for coverage. The plugin might be a better option if you are using a test runner that does not support loaders. The loader is a better option if you are feeling the plugin is too slow to handle.

The plugin is using processAssets with the stage of PROCESS_ASSETS_STAGE_ADDITIONS to read and update code, while the loader reads the code directly through webpack's loading mechanism.

Initially, the plugin/loader will createInstrumenter from the istanbul-lib-instrument package.

Both the plugin and the loader use the same configuration options and pass them along to the createTestExclude method. See the TestExclude.

Afterwards, will check if the requested file shouldInstrument and if so, it will be passed to instrumentSync method to finalize the instrumentation process.

To ensure your code is properly instrumented, you can check the __coverage__ variable in your browser's console.

Configuration

For the current time being, the following options are supported:

include?: string | string[]; // glob strings
exclude?: string | string[]; // glob strings
extension?: string | string[]; // dot file extensiosn (e.g. '.js', '.ts', ...etc)
cwd?: string;   // process.cwd() by default

Plugin Example

const { WebpackPluginIstanbul } = require("webpack-plugin-istanbul");

module.exports = {
  plugins: [
    new WebpackPluginIstanbul({
      include: ["src/**/*.js"],
      exclude: ["src/**/*.spec.js"],
      extension: [".js"],
      cwd: process.cwd(),
    }),
  ],
};

Loader Example

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        exclude: /node_modules/,
        use: {
          loader: "webpack-plugin-istanbul/loader",
          options: {
            include: ["src/**/*.js"],
            exclude: ["src/**/*.spec.js"],
            extension: [".js"],
            cwd: process.cwd(),
          },
        },
      },
    ],
  },
};

Credit

This plugin is based on the work of vite-plugin-istanbul by ifaxity. The plugin was originally created to work with Vite, but I wanted to use it with webpack. I decided to create a new plugin instead of forking the original because I wanted to make some changes to the API and the way the plugin works.