Control webpack verbosity when programmatically starting vue-cli-service serve

Question

I'm trying to run vue-cli-service serve from inside a Node.js application like this:

const Service = require('@vue/cli-service');
const service = new Service(process.cwd());
service.init("development");
service.run('serve').then(({ server, url }) => {
  console.log("started server on " + url);
});

And it works.

$ node e2e.js
INFO  Starting development server...
40% building 130/136 modules 6 active ...node_modules/eslint-loader/index.js??ref--13-0!.../ui/src/js/config/Product.js...
. . .
. . .
started server on http://localhost:8080/

But when I do it in production mode (change service.init("development") to service.init("production")), I don't see the webpack "building" progress anymore.

$ node e2e.js
INFO  Starting development server...
started server on http://localhost:8080/

Hence my question: how to start a Vue server in production mode, but keep webpack progress printed to the console?

Answer 1

Progress is reported by Webpack's ProgressPlugin, which Vue CLI inserts only for non-production and non-test builds (since 3.x).

You could enable this plugin in <root>/vue.config.js with devServer.progress=true (currently undocumented):

module.exports = {
  devServer: {
    progress: true  // always show progress (even in production mode)
  }
}

Or in your e2e.js, you could insert the ProgressPlugin into the Service instance's webpackChainFns[] after init():

service.init("production")
service.webpackChainFns.push(config => {
  config
    .plugin("progress")
    .use(require("webpack/lib/ProgressPlugin"))
})