? webpack bundle visualization // optimization // config tool
WebpackOps is a Webpack bundle visualization, optimization and customization tool that helps developers streamline the size of their webpack bundle through customized plugin selection and webpack config file generation. Webpack Ops also allows developers to visualize their bundle assets through interactive analysis charts.
1. Clone or Download the repository.
git clone https://github.com/CatSnake11/Webpack-Ops.git
2. Open the repository, go to your terminal and run the following commands to download all required libraries and generate build:
npm install
npm run webpackops
3. Once the build has completed, open a new tab in your terminal and run the following command to launch the application:
npm start
WebpackOps has three tabs - Home, Plugins, and Webpack Config. Below, please find instructions on how to use each tab:
Home
package.json
file by clicking the "Find Package.JSON" button and selecting your package.json
file.stats.json
file, click "Load Stats File" button and select the stats.json
file that was previously generated in your local repository. To generate a new stats.json
file using your selected config, click the "Generate Stats File" button, and then load your new stats.json
file.Plugins
package.json
and stats.json
files on the Home tab, select the plugins you would like to install in your Webpack bundle.webpack.config
and stats.json
files. Additionally, a preview of your new webpack.config
file with selected plugins will be displayed in the code window.Webpack Config
webpack.config
file for your project. First, click the "Select" button to select your root directory where you would like to generate your webpack.config
file.webpack.config
. You can preview what your config will look like in the code window on the right.webpack.config
file in your root directory.This project is licensed under the MIT License - see the LICENSE.md file for details