Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chrisbateman/webpack-visualizer
Visualize your Webpack bundle
https://github.com/chrisbateman/webpack-visualizer
webpack webpack-plugin
Last synced: 3 days ago
JSON representation
Visualize your Webpack bundle
- Host: GitHub
- URL: https://github.com/chrisbateman/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
- awesomelist - **webpack-visualizer**
- awesomelist - **webpack-visualizer**
- awesome-star-libs - chrisbateman / webpack-visualizer
- awesome-starred - chrisbateman/webpack-visualizer - Visualize your Webpack bundle (webpack)
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'
})],
//...
```
---
