浅析webpack-bundle-analyzer在vue-cli3中的使用
2019-11-01 07:06
1926 查看
正常的使用方法
安装
npm install webpack-bundle-analyzer -D
webpack.config.js:
vue-cli3的配置方法
根目录的vue.config.js(没有则自己创建)
module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) } }
执行以下命令即可查看到结果。
npm run serve
也可以改为独立的script
vue.config.js module.exports = { chainWebpack: config => { if (process.env.use_analyzer) { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) } } } package.json { "scripts": { ... "analyzer": "use_analyzer=true npm run serve" } }
那么在使用以下命令时,才会弹出analyzer
npm run analyzer
总结
以上所述是小编给大家介绍的webpack-bundle-analyzer在vue-cli3中的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- 浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
- vue-cli 脚手架的使用,及webpack模板与webpack-simple的区别
- 使用vue-cli创建项目,webpack打包
- 用npm安装vue和vue-cli,并使用webpack创建项目的方法
- 详解windows下vue-cli及webpack 构建网站(三)使用组件
- 使用vue-cli快速创建vue+webpack项目
- 使用vue-cli创建工程的时候提示vue-cli Failed to download repo vuejs-templates/webpack-simple:self signed certificate in certificate chain的解决方法
- vue-cli+webpack在生成的项目中使用bootstrap实例代码
- 使用vue-cli搭建脚手架webpack打包顶级商城APP
- vue-3.0配置webpack-bundle-analyzer模块分析器
- Vue—九天磨一剑之es6模块规范,webpack,vue-cli脚手架的使用
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- vue-cli,webpack,iview使用错误总结
- 用npm安装vue和vue-cli,并使用webpack创建项目
- 关于使用Vue-cli脚手架配合webpack-simple构建项目操作流程(自用)
- 使用vue-cli webpack 快速搭建项目的代码
- Vue-cli结合webpack中使用Bootstrap注意事项
- webpack-bundle-analyzer插件的使用方式
- 超简单使用vue-cli+webpack脚手架来构建vue项目
- 使用webpack构建vue-cli项目,写scss脚本语言报错