express 服务器如何与 webpack 中间件一起工作以启用热重载？答案

【问题标题】：how does express server work with wepback middlewares to enable hot reloading?express 服务器如何与 webpack 中间件一起工作以启用热重载？
【发布时间】：2016-09-19 23:05:32
【问题描述】：

我只是在学习 node、express 和 webpack，对中间件感到有些困惑。查看下面的代码，我的理解是，在我启动 Web 服务器并打开 http://localhost:7770/ 后，浏览器会向服务器发出一个 get 请求，该请求将通过 2 个中间件并在 @987654323 中创建一个 bundle.js @内存中的目录。然后请求命中以下：

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

它将发送index.html，而后者又会在dist 文件夹中请求bundle.js。 webpack-hot-middleware 监听保存到文件的任何更改，并自动构建一个新的捆绑包以托管在服务器上。它是否正确？我不完全确定何时调用中间件 - 何时发出请求或何时对代码进行更改（和保存）？

devServer.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(7770, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:7770');
});

webpack.config.dev.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/pokeapp'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      // js
      {
        test: /\.js$/,
        loaders: ['babel'],
        include: path.join(__dirname, 'client')
      },
...

【问题讨论】：

标签： javascript node.js express webpack middleware

【解决方案1】：

我对您使用的 webpack 模块以及它们是否包含 livereload 服务器不是非常熟悉。

根据你写的，这可能是发生了什么：

中间件在服务器收到客户端请求时运行
我相信 webpack 会在客户端请求通过时即时生成您的“bundle.js”以及其他任何文件。
客户端不一定知道它应该寻找对 bundle.js 的更改。

看起来您将其用于开发目的。如果是这样，this tutorial for gulp/nodemon/livereload 可能会完成您想要做的事情。

【讨论】：