Question

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

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

将发送index.html，bundle.js会在dist文件夹中请求webpack-hot-middleware。 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'); });侦听保存到文件的任何更改，并自动构建要在服务器上托管的新捆绑包。它是否正确？我不完全确定何时调用中间件 - 何时发出请求或何时对代码进行更改（并保存）？

devServer.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')
      },
...

webpack.config.dev.js

{{1}}

Answer 1

我对你正在使用的webpack模块以及它们是否包含一个livereload服务器并不是很熟悉。

根据你所写的内容，可能会发生这种情况：

当服务器收到来自客户端的请求时运行中间件
我相信webpack正在生成你的'bundle.js'以及当客户端请求通过时即时生成的任何其他文件。
客户端不一定知道应该查找对bundle.js的更改。

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

Express服务器如何与wepback中间件一起工作以启用热重新加载？

1 个答案: