How to use the webpack.ProgressPlugin function in webpack

function startDevServer(webpackOptions, options) {
  addDevServerEntrypoints(webpackOptions, options);

  let compiler;
  try {
    compiler = webpack(webpackOptions);
  } catch (e) {
    if (e instanceof webpack.WebpackOptionsValidationError) {
      console.error(colorError(options.stats.colors, e.message));
      process.exit(1); // eslint-disable-line
    }
    throw e;
  }

  if (options.progress) {
    compiler.apply(new webpack.ProgressPlugin({
      profile: argv.profile
    }));
  }

  const suffix = (options.inline !== false || options.lazy === true ? '/' : '/webpack-dev-server/');

  let server;
  try {
    server = new Server(compiler, options);
  } catch (e) {
    const OptionsValidationError = require('../lib/OptionsValidationError');
    if (e instanceof OptionsValidationError) {
      console.error(colorError(options.stats.colors, e.message));
          process.exit(1); // eslint-disable-line
    }
    throw e;

webpackConfig = Object.keys(argv.packages).map((key) => {
        const locales = argv.packages[key];
        const output = path.resolve(path.resolve(process.cwd(), argv.output, key));
        return createWebpackConfig(locales, output);
    });
}

if (webpackConfig) {
    RegExp.prototype.toJSON = RegExp.prototype.toString;
    /* eslint-disable no-console */
    if (argv.debug) {
        console.log(JSON.stringify(webpackConfig, null, 4));
    }
    const webpackCompiler = webpack(webpackConfig);

    webpackCompiler.apply(new webpack.ProgressPlugin());

    webpackCompiler.run((err, stats) => {
        if (err) {
            console.error(err.stack || err);
            if (err.details) {
                console.error(err.details);
            }
            return;
        }

        const info = stats.toJson();

        if (stats.hasErrors()) {
            console.error(info.errors);
        }

if (this.options.filename) {
      outputFilename = this.options.filename
    } else {
      outputFilename = '[name].js'
    }
    // Call like: ./bin/weex-builder.js test/index.vue dest/test.js
    // Need to rename the filename of
    if (destExt && this.dest[this.dest.length - 1] !== '/' && sourceExt) {
      outputPath = path.dirname(this.dest)
      outputFilename = path.basename(this.dest)
    } else {
      outputPath = this.dest
    }

    if (this.options.onProgress) {
      plugins.push(new webpack.ProgressPlugin(this.options.onProgress))
    }
    const hasVueRouter = (content: string) => {
      return /(\.\/)?router/.test(content)
    }

    const getEntryFileContent = (source, routerpath) => {
      const hasPluginInstalled = fse.existsSync(path.resolve(this.pluginFileName))
      let dependence = `import Vue from 'vue'\n`
      dependence += `import weex from 'weex-vue-render'\n`
      let relativePluginPath = path.resolve(this.pluginConfigFileName)
      let entryContents = fse.readFileSync(source).toString()
      let contents = ''
      entryContents = dependence + entryContents
      entryContents = entryContents.replace(/\/\* weex initialized/, match => `weex.init(Vue)\n${match}`)
      if (this.isWin) {
        relativePluginPath = relativePluginPath.replace(/\\/g, '\\\\')

let compiler;

  try {
    compiler = webpack(config);
  } catch (err) {
    if (err instanceof webpack.WebpackOptionsValidationError) {
      log.error(colors.error(options.stats.colors, err.message));
      // eslint-disable-next-line no-process-exit
      process.exit(1);
    }

    throw err;
  }

  if (options.progress) {
    new webpack.ProgressPlugin({
      profile: argv.profile,
    }).apply(compiler);
  }

  const suffix =
    options.inline !== false || options.lazy === true
      ? '/'
      : '/webpack-dev-server/';

  try {
    server = new Server(compiler, options, log);
  } catch (err) {
    if (err.name === 'ValidationError') {
      log.error(colors.error(options.stats.colors, err.message));
      // eslint-disable-next-line no-process-exit
      process.exit(1);

setupProgressPlugin() {
    // for CLI output
    new webpack.ProgressPlugin({
      profile: !!this.options.profile,
    }).apply(this.compiler);

    // for browser console output
    new webpack.ProgressPlugin((percent, msg, addInfo) => {
      percent = Math.floor(percent * 100);

      if (percent === 100) {
        msg = 'Compilation completed';
      }

      if (addInfo) {
        msg = `${msg} (${addInfo})`;
      }

      this.sockWrite(this.sockets, 'progress-update', { percent, msg });
    }).apply(this.compiler);
  }

"target="+app,
    "sourceMap"
].join("&");
// Configure SASS
var sassq = [
    "includePaths[]="+path.join(
        config.base, "bower_components",
        "bootstrap-sass/assets/stylesheets"
    ),
    "includePaths[]="+path.join(config.base, "bower_components"),
    "includePaths[]="+path.join(config.base, "node_modules"),
    "includePaths[]="+path.join(config.base, "themes"),
    "sourceMap"
].join("&");
// Progress output
var progress = new webpack.ProgressPlugin(function(p, msg){
    if(p===0) msg = "Starting compilation...";
    if(p===1) msg = "Done!";
    BIRD3.log.update("WebPack => [%s%%]: %s", p.toFixed(2)*100, msg);
});
// Try to press down further
var dedupe = new webpack.optimize.DedupePlugin();

// Banner
var bannerPlugin = new webpack.BannerPlugin((function(){
    return require("ejs").render(
        fs.readFileSync(path.join(__dirname, "banner.ejs"), "utf8"),
        {
            version: config.version
        },{
            filename: path.join(__dirname, "banner.ejs"),
            rmWhitespace: false

Object.keys(config.entry).forEach(k => {
        config.entry[k] = hmrClient.concat(config.entry[k]);
      });
    } else {
      config.entry = hmrClient.concat(config.entry);
    }

    config.plugins = [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ].concat(config.plugins);

    const compiler = webpack(config);

    if (options.progress !== false) {
      compiler.apply(new webpack.ProgressPlugin({ profile: options.progressProfile }));
    }

    const webpackDevOptions = _.merge(
      {
        // https: false,
        // disableHostCheck: true,
        headers: {
          "Access-Control-Allow-Origin": "*"
        },
        // port: archetype.webpack.devPort,
        // host: archetype.webpack.devHostname,
        quiet: false,
        lazy: false,
        watchOptions: {
          aggregateTimeout: 2000,
          poll: false

}

      continue;
    }

    let config = projectConfig.webpackConfigs[bundleName];

    /**
     * Let's add ProgressPlugin, but let's be sure that we don't mutate the user's config
     */
    let lastLocalProgress = 0;
    config = {
      ...config,
      plugins: [
        ...config.plugins,
        new webpack.ProgressPlugin(localProgress => {
          if (lastLocalProgress !== localProgress) {
            totalProgress = (bundlesBuilt + localProgress) / bundles.length;
            if (localProgress === 1) {
              bundlesBuilt++;
            }
            emitter.emit(Events.BUILD_PROGRESS, { progress: totalProgress });
            lastLocalProgress = localProgress;
          }
        }),
      ],
    };

    if (projectConfig.bundles[bundleName].dll) {
      await new Promise((resolve, reject) =>
        webpack(config).run(err => {
          if (err) {