sgs-node/webpack/dev/setup-dev-server.js

const pathConfig = require('config').get('path')
const projectConfig = require('config').get('project')

const {
  pathConfig: { template: templatePath }
} = require('./../config')
const fs = require('fs')
const fse = require('fs-extra')
const path = require('path')
const webpack = require('webpack')
const clientConfig = require('./webpack.client.config')
const serverConfig = require('./webpack.server.config')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin')
const { createBundleRenderer } = require('vue-server-renderer')
const koaSend = require('koa-send')

let singleEntry // 临时存储入口
let clientManifestAll // 临时存储所有打包后的文件

module.exports = function (app, config) {
  const dllJSON = require(path.resolve(pathConfig.dll, 'index.json'))
  const dllVendor = Object.values(dllJSON)
    .reduce((prev, cur) => {
      let val = Object.values(cur)
      prev = prev.concat(val)
      return prev
    }, [])
    .map(v => v.substring(1))

  const readFile = (fs, file) => {
    try {
      return fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
    } catch (e) {}
  }

  const createSingleEntry = (name = 'news', end = 'client') => {
    return [
      pathConfig.root,
      path.resolve(pathConfig.prepackPath, `./ssr/${name}/entry-${end}.js`),
      name
    ]
  }

  clientConfig.entry = {
    global: ['webpack-hot-middleware/client', pathConfig.global]
  }
  serverConfig.entry = {
    global: ['webpack-hot-middleware/client', pathConfig.global]
  }

  const template = fs.readFileSync(
    path.resolve(templatePath, 'ssr/template.html'),
    'utf-8'
  )

  const clientCompiler = webpack(clientConfig)
  const clientDevInstance = webpackDevMiddleware(clientCompiler, {
    publicPath: '/',
    stats: clientConfig.stats
  })
  let clientPromise = function () {
    return new Promise((resolve, reject) => {
      clientDevInstance.waitUntilValid(function () {
        let clientManifest = JSON.parse(
          readFile(clientDevInstance.fileSystem, 'vue-ssr-client-manifest.json')
        )
        resolve(clientManifest)
      })
    })
  }

  const serverCompiler = webpack(serverConfig)
  const serverDevInstance = webpackDevMiddleware(serverCompiler, {
    publicPath: '/',
    stats: serverConfig.stats
  })
  let serverPromise = function () {
    return new Promise((resolve, reject) => {
      serverDevInstance.waitUntilValid(function () {
        let bundle = JSON.parse(
          readFile(serverDevInstance.fileSystem, 'vue-ssr-server-bundle.json')
        )
        resolve(bundle)
      })
    })
  }

  /* 传入重置后 clientManifest & bundle */
  function renderer (clientManifest, bundle, ctx) {
    const context = {
      url: ctx.originalUrl,
      title: projectConfig.title,
      __SSR_CONTENT__: ctx.__SSR_CONTENT__
    }

    return new Promise((res, rej) => {
      createBundleRenderer(bundle, {
        template,
        clientManifest,
        runInNewContext: 'true'
      }).renderToString(context, (err, html) => {
        if (err) {
          console.log(err)
          console.log(err.stack)
          rej(err)
        } else {
          res(html)
        }
      })
    })
  }

  app.use(async (ctx, next) => {
    let reqPath = ctx.path
    if (!reqPath.startsWith('/sogou/detail')) {
      await next()
    } else {
      // #issure folder is path of entry
      let folder = reqPath.split('/').filter(v => v)[2]

      clientCompiler.apply(new SingleEntryPlugin(...createSingleEntry(folder)))
      clientDevInstance.invalidate()

      serverCompiler.apply(
        new SingleEntryPlugin(...createSingleEntry(folder, 'server'))
      )
      serverDevInstance.invalidate()
      try {
        let [clientManifest, bundle] = await Promise.all([
          clientPromise(),
          serverPromise()
        ])

        clientManifestAll = clientManifest.all // 临时存储

        let initial = dllVendor.concat(['js/global.js', `js/${folder}.js`])
        Object.assign(clientManifest, { initial })
        Object.assign(bundle, { entry: `js/${folder}-server.js` })
        let html = await renderer(clientManifest, bundle, ctx)
        ctx.body = html
      } catch (e) {
        ctx.body = e
      }
    }
  })

  app.use(async (ctx, next) => {
    let reqPath = ctx.path

    if (
      clientManifestAll.some(v => {
        return reqPath.includes(v)
      })
    ) {
      ctx.status = 200
      await clientDevInstance(ctx.req, ctx.res, async () => {
        await next()
      })
    } else {
      let maxage = 365 * 24 * 60 * 60 * 1000
      const exists = await fse.pathExists(`${pathConfig.static}${reqPath}`)
      let result
      if (exists) {
        result = await koaSend(ctx, reqPath, {
          root: pathConfig.static,
          maxage
        })
      }

      if (!result) {
        await next()
      }
    }
  })

  app.use(webpackHotMiddleware(clientCompiler))
}