vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > webpack-bundle-analyzer的问题

解决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文件组成和大小。

最后就是引入和使用了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文