-
安装webpack-bundle-analyzer版本号:^4.4.2
-
配置 webpack.config.js如下
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { plugins:[ new BundleAnalyzerPlugin({ analyzerMode: 'disabled', // 每次构建时自动打开server 手动打开 disabled generateStatsFile: true, // 是否生成stats.json文件 statsOptions: { source: false }, }), ] }
注:希望每次build自动打开 把上述analyzerMode调成server就可以 手动打开需要额外增加配置 如下
-
手动开启视图
- 第一步 再配置完webpack.config之后,先完成build构建工作
- package.json配置,执行npm run analyz即可打开
"scripts": { "analyz": "webpack-bundle-analyzer --port 8888 ./build/stats.json", },
- 小结:以上就是webpack-bundle-analyzer插件配置