脚本宝典收集整理的这篇文章主要介绍了vue-cli 2.x、create-react-app 项目，使用 webpack-bundle-analyzer 打包分析，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue-cli、create-react-app 项目如何查看打包分析？

create-react-app 搭建的项目中，引入 webpack-bundle-analyzer 打包分析

1.先运行npm run eject，将配置文件放在本地
2.安装npm install webpack-bundle-analyzer --save-dev
3.在 config/webpack.config.prod.js 文件（推荐）或 config/webpack.config.dev.js 中，添加

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
　　plugins: [
　　　　...
　　　　new BundleAnalyzerPlugin()
　　]
}

4.运行npm run build（推荐，这样只在打包时，打开分析网页；这个地方具体命令名，可在 package.json 文件中 scripts 部分修改）或npm run dev（每次运行这个命令，都会打开分析网页），打包分析页面：http://127.0.0.1:8888/ 。
scripts 部分，我修改成了：

"scripts": {
　　"dev": "node scripts/start.js",
　　"build": "node scripts/build.js",
　　"test": "node scripts/test.js --env=jsdom",
　　"analyze": "source-map-explorer dist/static/js/main.*"
},

• 例子地址：https://github.com/cag2050/an...

脚本宝典总结

以上是脚本宝典为你收集整理的vue-cli 2.x、create-react-app 项目，使用 webpack-bundle-analyzer 打包分析全部内容，希望文章能够帮你解决vue-cli 2.x、create-react-app 项目，使用 webpack-bundle-analyzer 打包分析所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。