html-webpack-plugin 加 webpack-dev-middleware 支持 SPA（单页应用）

[chemzqm]

所谓支持 SPA 就是在刷新页面后后端总是响应同样的 html 文件。
如果你是手工创建 html 文件则非常简单，支持给 express 加个简单的中间件：

app.use(function (req, res, next) {
  if (/^text\/html/.test(req.headers.accept)) {
    return res.sendFile(path.join(__dirname, '/index.html'))
  }
  next()
})

通常加到最后，这样不会影响之前加入的静态文件服务。

如果使用 html-webpack-plugin 则无法通过该方式处理，一种办法是在 html 请求时修改 request.url 指向 /，但是这种办法问题在于如何确定修改 url 的规则。另一种方式使用 run-middleware 这个包:

const runMiddleware = require('run-middleware')
const app = express()
runMiddleware(app)

// 加到最后
app.use(function (req, res, next) {
  app.runMiddleware('/', function (status, body, headers) {
    Object.keys(headers).forEach(function (key) {
      res.setHeader(key, headers[key])
    })
    res.status(status).send(body)
    next()
  })
})

在请求没被处理时修改 url 到 / 再跑一次所有中间件。