Skip to content

Generate a static HTML report from webpack stats during build

License

Notifications You must be signed in to change notification settings

webberig/webpack-html-stats-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Webpack HTML Stats Plugin

Build Status

This plugin will generate an HTML report using the Webpack stats object.

The result should be similar to that of webpack analyse with the difference that you don't need to upload/select your stats.json file. The report is made of static HTML files that you can easily publish for your team to review, or help you optimize your bundles.

Browse a sample report: https://webberig.github.io/webpack-html-stats-plugin/

Installation

The plugin is available via npm:

$ npm install --save-dev webpack-html-stats-plugin
$ yarn add --dev webpack-html-stats-plugin

Add the plugin to your webpack.config.js:

const { HtmlStatsPlugin } = require("webpack-html-stats-plugin")

module.exports = {
  plugins: [
    new HtmlStatsPlugin()
  ]
}

How it works

Every time a webpack build is triggered, the report will be generated in the /webpackReport folder inside your project.

Hot reloading is easily achieved if you use live-server to serve the report.

Contributions

Contributions welcome! The current report being generated is somewhat crude and lacks much information.

Todo's

  • Add tests
  • Properly define webpack version (currently tested on webpack 4.16)
  • Add more information about chunks, modules, assets
  • Implement a build stack for JS and CSS
  • CLI support
  • Configuration options (ie. target location)
  • Add size analysis graphs

About

Generate a static HTML report from webpack stats during build

Resources

License

Stars

Watchers

Forks

Packages

No packages published