Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://chrisbateman.github.io/webpack-visualizer/
Visualize your Webpack bundle
https://chrisbateman.github.io/webpack-visualizer/
webpack webpack-plugin
Last synced: about 2 months ago
JSON representation
Visualize your Webpack bundle
- Host: GitHub
- URL: https://chrisbateman.github.io/webpack-visualizer/
- Owner: chrisbateman
- License: mit
- Created: 2015-10-03T22:41:09.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T20:29:28.000Z (over 1 year ago)
- Last Synced: 2024-10-29T15:27:04.451Z (2 months ago)
- Topics: webpack, webpack-plugin
- Language: JavaScript
- Homepage: http://chrisbateman.github.io/webpack-visualizer/
- Size: 1.1 MB
- Stars: 1,692
- Watchers: 18
- Forks: 93
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-webpack-perf - Webpack Visualizer - -json > stats.json`). It lets you upload the `stats.json` file and see the bundle contents: (Analysis tools / Bundle contents)
README
# Webpack Visualizer
Visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates.
This tool is still pretty new, so please submit issues or feature requests!
## Site Usage
Upload your stats JSON file to the site: [chrisbateman.github.io/webpack-visualizer/](http://chrisbateman.github.io/webpack-visualizer/)
## Plugin Usage
```
npm install webpack-visualizer-plugin
```
```javascript
var Visualizer = require('webpack-visualizer-plugin');
//...
plugins: [new Visualizer()],
//...
```
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.
```javascript
var Visualizer = require('webpack-visualizer-plugin');
//...
plugins: [new Visualizer({
filename: './statistics.html'
})],
//...
```
---
