此文是「Webpack 2 视频教程」的第十八集的补充文字文档,主要对使用可视化图表对 Webpack 2 的编译与打包进行统计分析进行了详细地讲解,供您更加直观地参考。
在之前更新的共十七集「Webpack 2 视频教程」中,我们陆续讲解了 Webpack 2 从配置到打包、压缩优化到调试状态等情况都进行了详细地讲解,在这一小节,我们通过可视化的图表对 Webpack 2 的打包编译过程进行一个更加深刻地认识,同时可视化图表也是对项目概况以及优化指导是一个非常直观的方案。
1. Webpack 2 的编译统计信息生成
让 Webpack 2 生成统计信息的参数主要是配置以下两个。
--profile 统计生成至执行时间相关信息,可选参数;
--json 让 Webpack 生成统计信息,输出格式为 json。
以下为测试项目 package.json
中的配置截图。
配置后在命令行执行命令 npm run stats
即可在项目目录中看到生成的统计文件 stats.json
。