Question

Vue提供了一个HackerNews示例，演示了如何进行服务器端呈现以及热模块重新加载支持。

基本上，客户端和服务器端代码分为两个文件：被编译成两个json文件entry-client.js和entry-server.js。然后为每个编写两个webpack配置，它们将被编译成JSON文件。

然后，服务器server.js使用vue-server-renderer来处理两个JSON并提供内容。

对于热模块重新加载，build文件夹中有一个名为setup-dev-server.js的配置，它处理任务并将编译好的内容存储在webpack-dev-middleware的文件系统中。

只要您只对entry-client.js和entry-server.js及其相关模块进行更改，此设置就可以正常运行。但是，我想要做的是添加一个仅由server.js使用的新模块以及热模块重新加载支持。

一个例子是添加RESTful API，entry-api.js：

export function apiRoutes(app) {
  app.get('/hihi', (req, res, next) => {
    res.send(JSON.stringify({ status: 'hmr hi hitest success' }));
  });
  app.get('/byebye', (req, res, next) => {
    res.send(JSON.stringify({ status: 'hmr bye byetest success' }));
  });
}

在server.js：

const isProd = process.env.NODE_ENV === 'production'
// ...
const app = express()

// ...
if (isProd) {
  const template = fs.readFileSync(templatePath, 'utf-8')
  const bundle = require('./dist/vue-ssr-server-bundle.json')
  const clientManifest = require('./dist/vue-ssr-client-manifest.json')
    renderer = createRenderer(bundle, {
    template,
    clientManifest
  })
  apiRoutes = require('./dist/api-bundle.js')
  apiRoutes(app)
} else {
  readyPromise = require('./build/setup-dev-server')(
    app,
    templatePath,
    (bundle, api, options) => {
      renderer = createRenderer(bundle, options)
    }
  )
}
// ...
app.get('*', isProd ? render : (req, res) => {
  readyPromise.then(() => render(req, res))
})

我设法编写了一个webpack配置来编译entry-api.js，它非常适合生产构建。对于热模块重新加载，对与entry-api.js相关联的代码的任何更改都会触发重新编译，但更改不会实时反映。有人可以告诉我应该对set-dev-server.js进行哪些更改以使其有效吗？

参考：

我的entry-api.js的webpack配置：

const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const nodeExternals = require('webpack-node-externals')

module.exports = merge(base, {
  target: 'node',
  devtool: '#source-map',
  entry: './src/entry-api.ts',
  output: {
    filename: 'api-bundle.js',
    libraryTarget: 'commonjs2'
  },
  // https://webpack.js.org/configuration/externals/#externals
  // https://github.com/liady/webpack-node-externals
  externals: nodeExternals({
    // do not externalize CSS files in case we need to import it from a dep
    whitelist: /\.css$/
  }),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })
  ]
})

我还在GitHub上开了一个issue，我怀疑会得到任何答复。

Vue服务器端渲染热模块重新加载支持新模块

0 个答案: