Using webpack's html-webpack-plugin ~ fallback to cache memory?

[sunyang713]

Hi, so I use webpack-dev-server, and I use a the html-webpack-plugin. As a result, the index.html is served from the cache memory along with the rest of the javscript files. How can I use your middleware to still handle hitting 'refresh' on http://locahost:8080/some/route?

[sebdeckers]

@sunyang713 This middleware is meant to relay to sendFile and serve static files. Perhaps you want a different middleware that invokes a custom callback? Do you see a need to include this functionality here?

[sunyang713]

I see, the intended usage for your middleware is to serve static files. I read your blog post and was convinced to adopt your principle of simplicity. I don't know that many people use the html-webpack-plugin, but it's very useful to append hash keys to injected scripts for cache busting (in dev and prod). Consequently, you wouldn't be able to serve the static version of index.html, you would need to allow the html-webpack-plugin to generate the index.html file.

Here is the middleware code I ended up using as my solution:

  var app = express();
  var compiler = webpack(webpackConfig);
  . . .
  // History API Fallback
  app.get("*" function(req, res) {
    var memoryFs = compiler.outputFileSystem;
    var index = path.join(webpackConfig.output.path, "index.html");
    var html = memoryFs.readFileSync(index);
    res.end(html);
  });

What do you think? I agree with what you said, to keep this simple and not fall into adding random features.

EDIT: an additional note, I don't think this satisfies your requirements:

• Only for HTML requests: Never serve mistakenly for JS or CSS or image or other static file requests. Less debugging headaches.
• Only when needed: Serve the fallback only when the file is missing.

Maybe just putting the code inside a conditional if (req.accepts('html')) might work, I'll have to try later.

[Allov]

@sunyang713's solution works fine. Just a heads up for people using this on Windows, path.join() will join using backslashes ('\') and the memoryFs.readFileSync() function wants forwardslashes ('/').

[sebdeckers]

🙇 Apologies for the late response.

@sunyang713 Thanks for sharing. :) I'm not too familiar with the WebPack API so it looks a little scary to see a Sync method in there. Does that actually block or is it coming from memory?

@Allov May want to pass the path through slash(...) for consistency.

[sunyang713]

@cbas no worries, thanks for the response! I don't actually know if it blocks. It is coming from memory since it's webpack's internal API and not the regular 'readFileSync' method. I also have realized that this isn't exactly your issue. Here's an issue I posted on webpack-dev-middleware: https://github.com/webpack/webpack-dev-middleware/issues/88#issuecomment-249352019 I think this is the more appropriate location for this discussion. Thanks for your help!