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'：表示正在进行一次性编译。 Aynchronous; listener接受编译器对象和回调函数，必须调用该函数来指示监听器已完成处理事件。
'watch-run'：表示正在以监视模式编译或重新编译源。 Aynchronous; listener接受编译器对象和回调函数，必须调用该函数来指示监听器已完成处理事件。
'invalid'：表示在观看过程中检测到源的变化（很快会被watch-run事件跟踪。同步;侦听器不带参数。

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

1 个答案: