---
# System prepended metadata

title: Build up a WebPack Analyzer (外掛module關連分析)

---

# Build up a WebPack Analyzer (外掛module關連分析)
## Install（安裝方式）
因為我們用的是vue-cli, 所以就不用 webpack-cli 來安裝 analyzer 了

```
yarn add vue-cli-plugin-webpack-bundle-analyzer
```
## fix vue.config.js
* please add the line on red(請加入紅色的字)
module.exports = {
  transpileDependencies: ['vuetify'],
  publicPath: '/',
  productionSourceMap: false,
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
    <font color=red> config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);</font>
  },

## then run 'yarn dev' to the magic on your local machine
```
(base) cori@cori app % yarn dev
```
![](https://i.imgur.com/qNPObZL.png)
