Webpack-dev-server: What are the equivalent of webpack-serve's "on" hooks?

Created on 23 Sep 2018 · 9Comments · Source: webpack/webpack-dev-server

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?

Source

marcofugaro

👍1

Most helpful comment

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])
      },
    },
  },
}

marcofugaro on 24 Sep 2018

👍6

All 9 comments

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

alexander-akait on 24 Sep 2018

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])
      },
    },
  },
}

marcofugaro on 24 Sep 2018

👍6

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

aszmyd on 1 Nov 2018

what about the solution given in this issue: https://github.com/webpack/webpack-dev-server/issues/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);
...