What are the equivalent of webpack-serve's "on" hooks?

[marcofugaro]

Sorry if this is a question, but I can't find a solution.

I found myself migrating back to webpack-dev-server after webpack-serve was deprecated. I found really useful to attach hooks in the webpack.config.js without having to touch node at all.

The hooks I used were on.listening, on.build-finished, on.compiler-error to show custom stats to the console. What are the equilvalent hooks in webpack-dev-server? I only found after that could substitute the on.listening, how do I attach hooks to the remaining two events, without having to run webpack from node?

Another thing I was doing:

on: {
  listening: ({ server, options }) => {
    // try to open into the already existing tab
    openBrowser(`http://localhost:${options.port}`)
  },
},

How do I do this in webpack-dev-server? How do I get the port from the arguments in after?

[alexander-akait]

@marcofugaro it is feature, can you describe use case for this?

[marcofugaro]

Sure thing! Basically I was using these hooks to show only the information I need to the console (same thing I was using webpack-command for).

Here is config I was using, take a look at the comments:

const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
const openBrowser = require('react-dev-utils/openBrowser')
const prettyMs = require('pretty-ms')

module.exports = {
  serve: {
    port: 8080,
    // don't show all the default webpack stuff
    logLevel: 'silent',
    hotClient: {
      logLevel: 'silent',
    },
    devMiddleware: {
      logLevel: 'silent',
    },
    on: {
      listening: ({ options }) => {
        // try to open into the already existing tab
        openBrowser(`http://localhost:${options.port}`)
      },
      'build-finished': ({ stats }) => {
        if (stats.hasErrors()) {
          return
        }
        
        const time = prettyMs(stats.endTime - stats.startTime)
        console.log(`Compiled successfully in ${time}`)
      },
      'compiler-error': stats => {
        // format the errors in a nicer way
        const messages = formatWebpackMessages(stats.json)
        console.log(messages.errors[0])
      },
    },
  },
}

[aszmyd]

Check out this plugin: https://www.npmjs.com/package/event-hooks-webpack-plugin

[polco]

what about the solution given in this issue: #132 ?
using the hook API instead of the deprecated plugin one:

...
const compiler = webpack(webpackConfig);
compiler.hooks.done.tap('done', (stats) => {})
const server = new WebpackDevServer(compiler, options);
...

[marcofugaro]

@polco as I already specified, I don't want to call webpack from node, I have a simple webpack.config.js and want to keep it that way.

[polco]

My bad

[alexander-akait]

PR welcome, it is should be not diffucult

@evilebottnawi Could you stop writing PR welcome on every issue.

[alexander-akait]

@atilkan What is the problem?

[alexander-akait]

I want to close this issue in favor of webpack's built-in hooks, also we have some callbacks, like before/after, so I think it should be enough to implement the same behaviour, anyway if you really need something new feel free to open an issue with example what is missing