behavior of static and historyApiFallback

[knagaitsev]

Expected Behavior

Static serving middleware for the dev server should only need to be applied to the express server once via this.app.use(...)

Actual Behavior

static middleware is applied to the express server multiple times in order to make historyApiFallback work as expected. This is explained here: #2670 (comment)

A similar thing seems to have been added for the middleware feature as seen here, as it is added multiple times:

webpack-dev-server/lib/Server.js

Lines 548 to 559 in 4ab1f21

	runnableFeatures.push('setup', 'before', 'headers', 'middleware');
	if (this.options.proxy) {
	runnableFeatures.push('proxy', 'middleware');
	}
	if (this.options.contentBase !== false) {
	runnableFeatures.push('contentBaseFiles');
	}
	if (this.options.historyApiFallback) {
	runnableFeatures.push('historyApiFallback', 'middleware');

Solution

We need to find a way to either apply all of this middleware once without having any breaking changes, or have intentional slight breaking changes while only applying the middleware once. We should also look into if applying the same middleware many times causes performance losses, or if it is an acceptable thing to do.

[csr632]

Yes, if the proxy feature or the historyApiFallback feature is enabled, http-proxy-middleware will be applied to the express server multiple times.

[alexander-akait]

historyApiFallback also break HEAD request in some cases, we need fix it, more information here webpack/webpack-dev-middleware#749

[alexander-akait]

Partially fixed #4501

[BRMatt]

I ran into this issue earlier and spent a few hours trying to debug it. In my case it turned out that configuring the webpack-dev-server proxy option with context and router options, but not target causes webpack-dev-server to ignore the context option when configuring the proxy:

webpack-dev-server/lib/Server.js

Lines 2174 to 2189 in 49efdf8

	const getProxyMiddleware = (proxyConfig) => {
	// It is possible to use the `bypass` method without a `target` or `router`.
	// However, the proxy middleware has no use in this case, and will fail to instantiate.
	if (proxyConfig.target) {
	const context = proxyConfig.context || proxyConfig.path;
	return createProxyMiddleware(
	/** @type {string} */ (context),
	proxyConfig
	);
	}
	if (proxyConfig.router) {
	return createProxyMiddleware(proxyConfig);
	}
	};

My understanding is that if you're using router you don't need to specify target, but if I don't then webpack-dev-server configures the proxy to intercept every request, rather than just the requests that match the context.

In my case I'm only proxying a single endpoint, so I've configured context and target to the same value, and let the router reconfigure the target on each request. This appears to fix the conflict with historyApiFallback.

[alexander-akait]

I think we can improve/fix:

return createProxyMiddleware(proxyConfig); 

So we will always pass options even you don't have router, what do you think?