解决webpack-bundle-analyzer的问题大坑
作者:IT博客技术分享
这篇文章主要介绍了解决webpack-bundle-analyzer的问题大坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
webpack-bundle-analyzer的问题大坑
关于webpack-bundle-analyzer的问题大坑,会导致,打包后端口占用,复制一份代码在起一个服务,报错端口占用,无法启动。
报错如下
解决办法
1.首先引入webpack-bundle-analyzer模块
安装命令:npm install –save-dev webpack-bundle-analyzer
2.在webpack中的代码配置 (vueCli3.0 举例)
先说正常的流程的步骤:
2.1、在vue.config.js中进行配置
chainWebpack: config => { config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) }
2.2、在package.json中配置(或直接使用npm run build --report)
"scripts": { "analyz": "NODE_ENV=production npm_config_report=true npm run build" }
2.3、 只配置生产环境的打包
config.when(process.env.NODE_ENV === 'production', config => { config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) })
2.4、执行打包命令(会在浏览器自动打开http://127.0.0.1:8888)
npm run bulid
如果8888端口被占用,则提示打包失败。
2.5、下面来说说端口被占用的处理方法:
首先要在vue.conf.js里
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
new BundleAnalyzerPlugin({ analyzerMode: 'server', analyzerHost: '127.0.0.1', analyzerPort: 8889, reportFilename: 'report.html', defaultSizes: 'parsed', openAnalyzer: true, generateStatsFile: false, statsFilename: 'stats.json', statsOptions: null, logLevel: 'info' }) }
if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) }
我是这么判断的:
// 生产环境相关配置 if (isProduction) { config.plugins.push( new BundleAnalyzerPlugin({ analyzerMode: 'server', analyzerHost: '127.0.0.1', analyzerPort: 8880, reportFilename: 'report.html', defaultSizes: 'parsed', openAnalyzer: true, generateStatsFile: false, statsFilename: 'stats.json', statsOptions: null, logLevel: 'info' }), ) }
复制一份code再起一个服务的时候,只需要改:analyzerPort: 8880, 就可以了。
好啦,这样在webpack里基本的配置就完成了,而且你npm run build 的时候就会自动打开网址,显示你的打包后的js文件组成和大小。
最后就是引入和使用了
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。