Please support honojs

[ckken]

use honojs like https://webpack.js.org/configuration/dev-server/#devserverapp
https://github.com/webpack/webpack-dev-middleware/tree/master?tab=readme-ov-file#hono

Feature Proposal

Feature Use Case

Please paste the results of npx webpack-cli info here, and mention other relevant information

[alexander-akait]

I think we already support it, but without middleware support (we can fix it here, you can setup own), we have the app option

[ckken]

• connect-history-api-fallback
• http-proxy-middleware
• http-proxy-middleware-error-handler
• serve-index
• compression [fixed]
• webpack-dev-middleware [fixed]
• express-static [fixed]
• options-middleware [fixed]

I rewrote the webpack-dev-server with typescript and found that the above middleware did not solve the problem. The biggest problem at present is connect-history-api-fallback,Other functions can be operated normally

[alexander-akait]

Do you mean they doesn't work?

[ckken]

Do you mean they doesn't work?

yes

[alexander-akait]

I think in which case you need to use setupMiddlewares and replace all middlewares on honojs middlewares, we can't fix it right now, as wokrarond you can write wrapper function to support connect middlewares

[alexander-akait]

Let's close in favor #4741, I will add basic honor support without external middlewares support, because we can't rewrite them here, anyway if you can setup them using setupMiddlewares

[ckken]

Can you provide a minimal demo? Although the rewrite has been completed, I rewrote it with ts and cannot use the plugin code.

[alexander-akait]

I will add a test today

[ckken]

https://github.com/webpack/webpack-dev-server/blob/3096148746c906105c4424352f5b5ad1bff0fd4f/lib/Server.js#L2422C1-L2425C7
create server in hono.js is

    const op: any = {
      port: this.options.port,
    }
    if (type === 'http') {
      const {createServer} = await import('node:http')
      op.createServer = createServer
    } else if (type === 'https') {
      const {createSecureServer} = await import('node:http2')
      op.createServer = createSecureServer
      op.serverOptions = {
        ...options,
        allowHTTP1: true,
      }
      // console.log(op)
    }
    this.server = serve({
      fetch: AppServer.app.fetch,
      ...op,
    })

[ckken]

https://github.com/webpack/webpack-dev-server/blob/3096148746c906105c4424352f5b5ad1bff0fd4f/lib/Server.js#L2422C1-L2425C7 create server in hono.js is

    const op: any = {
      port: this.options.port,
    }
    if (type === 'http') {
      const {createServer} = await import('node:http')
      op.createServer = createServer
    } else if (type === 'https') {
      const {createSecureServer} = await import('node:http2')
      op.createServer = createSecureServer
      op.serverOptions = {
        ...options,
        allowHTTP1: true,
      }
      // console.log(op)
    }
    this.server = serve({
      fetch: AppServer.app.fetch,
      ...op,
    })

import {serve} from '@hono/node-server'
    this.server = serve({
      fetch: AppServer.app.fetch,
      ...op,
    })

[alexander-akait]

We have the server option for this

[ckken]

"webpack-dev-server": "^5.0.4"
use this options #5275

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'app'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, ipc?, liveReload?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
 - options.server should be one of these:
   "http" | "https" | "spdy" | non-empty string | object { type?, options? }
   -> Allows to set server and options (by default 'http').
   -> Read more at https://webpack.js.org/configuration/dev-server/#devserverserver
   Details:
    * options.server should be one of these:
      "http" | "https" | "spdy"
    * options.server should be a non-empty string.
    * options.server should be an object:
      object { type?, options? }