如何使用 webpack-dev-middleware 对构建统计信息进行自定义格式化？

Question

我目前正在使用 basic Webpack API 和自定义打印机来打印结果，即：

import webpack from 'webpack'

webpack({ /* webpack config */ }, printStats)

function printStats(err, stats) {
  // my custom printing of build results
}

现在我想改用 webpack-dev-middleware，但保留我的静态打印机。我希望这可能会起作用：

import webpackDev from 'webpack-dev-middleware'

app.use(webpackDev(webpack({ /* webpack config */ }, printStats), {
    quiet: true // disable default printing so I can use my own
    // ... more webpack-dev-middelware configuration
}))

但它只打印第一个编译并忽略后续的编译，即使它们确实发生了。正确的做法是什么？

Answer 1

我通过plugin方法直接监听Webpack编译器对象解决了这个问题：

const compiler = webpack({ /* webpack config */ })

compiler.plugin('done', stats => {
  // my custom printing of build results
})

app.use(webpackDev(compiler, {
  quiet: true // disable default printing so I can use my own
  // ... more webpack-dev-middelware configuration
}))

每次编译完成时都会发生 done 事件，无论成功与否。您可以通过 plugin 方法收听的其他事件：

'run'：表示正在进行一次性编译。异步的；侦听器采用编译器对象和回调函数，必须调用它们以指示侦听器已完成对事件的处理。
'watch-run'：表示正在以监视模式编译或重新编译源代码。异步的；侦听器采用编译器对象和回调函数，必须调用它们以指示侦听器已完成对事件的处理。
'invalid'：表示在观察源的过程中检测到变化（紧接着是 watch-run 事件。同步；侦听器不接受任何参数。

如何使用 webpack-dev-middleware 对构建统计信息进行自定义格式化？

How to do custom formatting of build stats with webpack-dev-middleware?

javascript

webpack

webpack-dev-middleware