webpack之依赖图（dependency graph）

webpack之依赖图（dependency graph）

bundle分析（bundle analysis）工具

（1）webpack-chart:webpack stats可交互饼图；

（2）webpack-visualizer:可视化分析你的bundle，检查哪些模块占用空间，哪些可能是重复使用的；

（3）webpack-bundle-analyzer：一个Plugin和cli工具，他将bundle内容展示为一个便捷的、交互的、可缩放的树状图形式；

（4）webpack bundle optimize helper:这个工具会分析你的bundle，并提供可操作的改进措施，以减少bundle的大小；

（5）bundle-stats:生成一个bundle报告（bundle大小、资源、模块），并比较不同构建之间的结果

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
 mode: 'development',
 entry: {
  app: './src/app.js',
  app2: './src/app2.js'
 },
 
 plugins: [
  new HtmlWebpackPlugin(),
  new BundleAnalyzerPlugin()
 ]
 
}