如何使用webpack-dev-middleware定制構建統計信息的格式？

Question

我目前正在使用基本的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時，都將發生done事件。 您可以通過plugin方法收聽的其他事件：

• 'run' ：表示正在進行一次編譯。 Aynchronous; 偵聽器采用編譯器對象和回調函數，必須調用這些函數以指示偵聽器已完成處理事件。
• 'watch-run' ：表示正在以監視模式編譯或重新編譯源。 Aynchronous; 偵聽器采用編譯器對象和回調函數，必須調用這些函數以指示偵聽器已完成處理事件。
• 'invalid' ：指示在觀看源過程中檢測到對源的更改（不久將出現watch-run事件。同步；偵聽器不接受任何參數。