webpack-stats-graph - Generate a graph to visualize modules and bundles from webpack via stats.json

  •        157

By default output is written to a statsgraph folder in the current directory.

https://github.com/g0t4/webpack-stats-graph#readme

Dependencies:

chalk : ^2.1.0
color-convert : ^1.9.0
datauri : ^1.0.5
graphviz : 0.0.8
lodash : ^4.17.4
shelljs : ^0.7.8
yargs : ^9.0.1

Tags
Implementation
License
Platform

   




Related Projects

rubrowser - a ruby code dependency graph interactive visualizer

  •    Javascript

a visualizer for ruby code (rails or otherwise), it analyze your code and extract the modules definitions and used classes/modules and render all these information as a directed force graph using D3. the idea is that the project opens every .rb file and parse it with parser gem then list all modules and classes definitions, and all constants that are listed inside this module/class and link them together.

html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles

  •    Javascript

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. The html-webpack-plugin works without configuration. It's a great addition to the ⚙️ webpack-config-plugins.

Webpack - A bundler for javascript and friends

  •    Javascript

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack-visualizer - Visualize your Webpack bundle

  •    Javascript

Visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates. This will output a file named stats.html in your output directory. You can modify the name/location by passing a filename parameter into the constructor.

webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

  •    Javascript

Visualize size of webpack output files with an interactive zoomable treemap. It will create an interactive treemap visualization of the contents of all your bundles.


svg-sprite-loader - Webpack loader for creating SVG sprites.

  •    Javascript

Webpack loader for creating SVG sprites. 🎉 2.0 is out, please read the migration guide & overview.

bonsai - Understand the tree of dependencies inside your webpack bundles, and trim away the excess.

  •    Javascript

Trim your javascript dependency tree. The quickest way to get started is to generate a Webpack stats file, and then drag and drop it into https://pinterest.github.io/bonsai/analyze.

webpack-bundle-size-analyzer - A tool for finding out what contributes to the size of Webpack bundles

  •    TypeScript

A small utility to help you find out what is contributing to the size of your Webpack bundles. Webpack has a JSON output mode which produces detailed machine-readable information about everything that has been included in a generated bundle.

svg-react-loader - Webpack SVG to React Component Loader

  •    Javascript

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones. The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

preload-webpack-plugin - A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

  •    Javascript

A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading. Note: This is an extension plugin for html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

serviceworker-webpack-plugin - Simplifies creation of a service worker to serve your webpack bundles

  •    Javascript

Simplifies creation of a service worker to serve your webpack bundles. You can have a look at the /docs folder if you need a full working example.

whybundled - Answers the question – Why the hell is this module in a bundle?

  •    Javascript

Ever wondered why any particular module ended up in a bundle? WhyBundled is here to answer exactly this question. It's meant to be used alongside stats report from webpack.

django-webpack-loader - Transparently use webpack with django

  •    Python

Read http://owaislone.org/blog/webpack-plus-reactjs-and-django/ for a detailed step by step guide on setting up webpack with django using this library. Use webpack to generate your static bundles without django's staticfiles or opaque wrappers.

react-native-webpack-server - Build React Native apps with Webpack

  •    Javascript

react-native-webpack-server is a development server that leverages the Webpack Dev Server and the React Packager to enable building React Native JavaScript bundles with webpack. This allows you to use the existing webpack ecosystem when targeting React Native. This will start the server on port 8080.

svg-inline-loader - Inline SVG loader with cleaning-up functionality

  •    Javascript

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too. Simply add configuration object to module.loaders like this.

webpack-dev-middleware - A development middleware for webpack

  •    Javascript

An express-style development middleware for use with webpack bundles and allows for serving of the files emitted from webpack. This should be used for development only.Note: We do not recommend installing this module globally.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

assets-webpack-plugin - Webpack plugin that emits a json file with assets paths

  •    Javascript

Webpack plugin that emits a json file with assets paths. When working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting).