webpack-dev-server
webpack-dev-server copied to clipboard
webpack
What are the equivalent of webpack-serve's "on" hooks?
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?
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])
},
},
},
}
Check out this plugin: https://www.npmjs.com/package/event-hooks-webpack-plugin
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);
...
@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.
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