entries-webpack-plugin

Entries Webpack Plugin

Outputs webpack assets chunks for entries to a json file

Problem

Webpack 4 optimization splits code of entry to chunks. So in the result you can have a few chunks for the entry and some of the entries can share some chunks.

Solution

To get all chunks for a entry you can use entries-webpack-plugin

webpack config

function extraAssetMiddelware(compilation, entries, cb) {
  entries.extra = {
    css: [`extra-asset.${compilation.hash}.css`],
  };
  cb(entries);
}

// ...

{
  // ...
  entry: {
    index: 'index.js',
    about: 'about.js',
  },
  optimization: {
    // ...
  }
  // ...
  plugins: [
    new EntriesPlugin({
      filename: 'entries.json',
      pretty: true,
      middlewares: [
        extraAssetMiddelware,
      ]
    }),
  ]
}

where index and about share common js and css libs as the result of optimization you will have vendors~index~about~post common js and css chunks so output is

{
  "index": {
    "js": [
      "vendors~index~about.c025d01e7caee3789803.js",
      "index.c025d01e7caee3789803.js"
    ],
    "css": [
      "vendors~index~about.c025d01e7caee3789803.css"
    ]
  },
  "about": {
    "js": [
      "vendors~index~about.c025d01e7caee3789803.js",
      "about.c025d01e7caee3789803.js"
    ],
    "css": [
      "vendors~index~about.c025d01e7caee3789803.css"
    ]
  },
  "extra": {
    "css": [
      "extra-asset.025d01e7caee3789803.css"
    ]
  }
}

License

License The MIT License Copyright (c) 2018 Ivan Zakharchanka