Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: example to split stats by entry point #43

Open
jdrub opened this issue Nov 14, 2019 · 1 comment
Open

Docs: example to split stats by entry point #43

jdrub opened this issue Nov 14, 2019 · 1 comment

Comments

@jdrub
Copy link

jdrub commented Nov 14, 2019

The inspectpack docs say that you can use this plugin to generate separate stats files per entrypoint. Since it seems like a relatively important use case to get the most out of inspectpack, can you add that as an example in this repo? I'm having some trouble understanding how to properly write a custom transform function to do that.

Regardless, I love the plugin and docs for this in general, so thanks!

@jdrub jdrub changed the title Docs: Split Stats by Entry Point Example Docs: example to split stats by entry point Nov 14, 2019
@ryan-roemer
Copy link
Member

ryan-roemer commented Nov 19, 2019

Hi @jdrub !

Here's a quick example to get you going. The small awkward part of this is that there's still a default asset created as filename setting dictates, which you could just ignore:

"use strict";

/**
 * Multiple entry points with per-entry-point stats output example.
 */
const { StatsWriterPlugin } = require("webpack-stats-plugin");

const INDENT = 2;
const stringify = (obj) => JSON.stringify(obj, null, INDENT);

module.exports = Object.assign({}, base, {
  entry: {
    main: "../src/main.js",
    two: "../src/main.js",
    three: "../src/main.js"
  },
  plugins: [
    new StatsWriterPlugin({
      filename: "stats-multi-all-entry-points.json",
      fields: ["assets", "modules"],
      transform({ assets, modules }, { compiler }) {
        Object.keys(assets).forEach((assetIdx) => {
          // Reconstitute assets, modules filtered by this specific asset.
          const asset = assets[assetIdx];
          const assetChunks = new Set(asset.chunks);
          const assetStr = stringify({
            assets: [asset],
            modules: modules.filter((mod) => mod.chunks.some((c) => assetChunks.has(c)))
          });

          // Convert `[hash].[name].js` to `[name]` for later use.
          // This replace depends on how you are specifying asset outputs.
          const assetName = asset.name.replace(/.*?\.(.*?)\.js/, "$1");
          // Add per-asset output.
          compiler.assets[`stats-multi-${assetName}.json`] = {
            source() { return assetStr; },
            size() { return assetStr.length; }
          };
        });

        // This is the default "all entry points" output.
        // You _could_ set it to null or empty, but the plugin currently sets
        // `filename` option to a separate asset in output.
        return stringify({ assets, modules });
      }
    })
  ]
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants