webpack-stats-plugin

What is webpack-stats-plugin?

The webpack-stats-plugin is a plugin for Webpack that allows you to generate and customize the stats output of your Webpack build process. This can be useful for analyzing the build performance, understanding the structure of your bundles, and debugging issues.

What are webpack-stats-plugin's main functionalities?

Generate Stats JSON

This feature allows you to generate a JSON file containing detailed statistics about your Webpack build. The `StatsWriterPlugin` is configured to output a `stats.json` file with information about assets, chunks, and modules.

const { StatsWriterPlugin } = require('webpack-stats-plugin');

module.exports = {
  plugins: [
    new StatsWriterPlugin({
      filename: 'stats.json',
      stats: {
        all: false,
        assets: true,
        chunks: true,
        modules: true,
      },
    }),
  ],
};

Custom Stats Output

This feature allows you to customize the output of the stats file. The `transform` function is used to modify the data before it is written to the file. In this example, the output JSON file will contain only the assets and module names.

const { StatsWriterPlugin } = require('webpack-stats-plugin');

module.exports = {
  plugins: [
    new StatsWriterPlugin({
      filename: 'custom-stats.json',
      transform(data, opts) {
        return JSON.stringify({
          assets: data.assetsByChunkName,
          modules: data.modules.map(module => module.name),
        }, null, 2);
      },
    }),
  ],
};

Other packages similar to webpack-stats-plugin

webpack-bundle-analyzer

The webpack-bundle-analyzer plugin provides a visual representation of the contents of your bundles. It generates an interactive treemap visualization of the contents of all your bundles, which can help you understand the size and composition of your bundles. Unlike webpack-stats-plugin, which focuses on generating stats files, webpack-bundle-analyzer provides a more visual and interactive way to analyze your bundles.

webpack-dashboard

The webpack-dashboard plugin provides a terminal-based dashboard for your Webpack build process. It displays real-time information about the build, including progress, errors, and warnings. This can be useful for getting a quick overview of the build process without having to dig into stats files. Compared to webpack-stats-plugin, webpack-dashboard is more focused on providing real-time feedback during the build process.

speed-measure-webpack-plugin

The speed-measure-webpack-plugin measures the build time of your Webpack plugins and loaders. It provides detailed timing information that can help you identify performance bottlenecks in your build process. While webpack-stats-plugin focuses on generating detailed stats about the build output, speed-measure-webpack-plugin is specifically designed to help you optimize the build performance.

README

Webpack Stats Plugin

This plugin will ingest the webpack stats object, process / tranform the object and write out to a file for further consumption.

The most common use case is building a hashed bundle and wanting to programmatically referring to the correct bundle path in your Node.js server.

Installation

The plugin is available via npm:

$ npm install --save webpack-stats-plugin

Examples

Stats Writer Plugin

var StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;

module.exports = {
  plugins: [
    // Everything else **first**.

    // Write out stats file to build directory.
    new StatsWriterPlugin({
      path: path.join(__dirname, "build"),
      filename: "stats.json" // Default
    })
  ]
}

Plugins

• StatsWriterPlugin(opts)

StatsWriterPlugin(opts)

• opts (Object) options
• opts.path (String) directory path to create / output to (Default: "")
• opts.filename (String) output file name (Default: "stat.json")
• opts.fields (Array) fields of stats obj to keep (Default: ["assetsByChunkName"])
• opts.transform (Function) transform function of stats object before writing

Stats writer module.

Stats can be a string or array (we"ll have array from using source maps):

"assetsByChunkName": {
  "main": [
    "cd6371d4131fbfbefaa7.bundle.js",
    "../js-map/cd6371d4131fbfbefaa7.bundle.js.map"
  ]
},

Note: The stats object is big. It includes the entire source included in a bundle. Thus, we default opts.fields to ["assetsByChunkName"] to only include those. However, if you want the whole thing (maybe doing an opts.transform function), then you can set fields: null in options to get all of the stats object.

See:

• http://webpack.github.io/docs/long-term-caching.html#get-filenames-from-stats
• https://github.com/webpack/docs/wiki/node.js-api#stats

Contributions

Contributions welcome! Make sure to pass $ gulp check.