webpack-bundle-analyzer 插件配置

目录

一、webpack-bundle-analyzer是什么？

二、安装

三、使用方法

1. 作为插件使用

2. 作为CLI的一个工具

---

一、webpack-bundle-analyzer是什么？

webpack-bundle-analyzer是webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件可以读取输出文件夹（通常是dist）中的stats.json文件，把该文件可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件Gzipped后的大小、模块包含关系、依赖项等，对应做出优化，从而帮助提升代码质量和网站性能。

---

二、安装

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer
1
2
3
4

---

三、使用方法

1. 作为插件使用

1. 配置webpack.config.js文件：

// webpack.config.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
    // 默认配置的具体配置项
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort
1
2
3
4
5
6
7
8
9
10