> For the complete documentation index, see [llms.txt](https://yyaozhibo.gitbook.io/qian-duan-xue-xi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yyaozhibo.gitbook.io/qian-duan-xue-xi/webpack/progressbarwebpackplugin.md).

# ProgressBarWebpackPlugin

ProgressBarWebpackPlugin 可以帮助 npm 优雅地加载项目，直观展示项目加载进度。

### 安装

```bash
npm i -D progress-bar-webpack-plugin
```

### 基本用法

```javascript
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
...
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
    ...,
    new ProgressBarPlugin({
      complete: Chalk.green('█'),
      incomplete: Chalk.white('█'),
      format: '  build :bar ' + Chalk.green.bold(':percent') + ' (:elapsed seconds)'
    })
  ]
};
```

![效果](https://2700564022-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lq-o8jVyndwUNS72Sn3%2F-Lq088SV63zyb1FTQii6%2F-Lq09KbT9njfogF3h_9E%2Fimage.png?alt=media\&token=d5afa326-fc6e-422c-81e8-c52729c6c314)