首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >快速服务器如何与wepback中间件一起工作以启用热重装?

快速服务器如何与wepback中间件一起工作以启用热重装?
EN

Stack Overflow用户
提问于 2016-09-19 23:05:32
回答 1查看 30关注 0票数 0

我只是在学习节点、表达式和webpack,对中间件感到有些困惑。查看下面的代码,我的理解是,在启动web服务器并打开http://localhost:7770/之后,浏览器向服务器发出一个get请求,该服务器将通过两个中间件并在内存中的dist目录中创建一个bundle.js。然后,请求如下:

代码语言:javascript
复制
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

它将发送index.html,而后者将请求dist文件夹中的bundle.jswebpack-hot-middleware侦听保存到文件中的任何更改,并自动构建要托管在服务器上的新包。这是正确的吗?我不完全确定何时调用中间件-什么时候发出请求,或者何时对代码进行更改(和保存)?

devServer.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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')
      },
...
EN

回答 1

Stack Overflow用户

发布于 2016-09-19 23:31:46

我不太熟悉webpack模块的使用,以及它们是否包括肝脏服务器。

根据你所写的,这可能是正在发生的事情:

  1. 当服务器收到来自客户端的请求时,将运行中间件。
  2. 我相信webpack正在生成您的“bundle.js”和其他任何文件,当客户端请求通过时,这些文件都在正常运行。
  3. 客户端不一定知道它应该查找对bundle.js的更改。

看起来你是为了开发目的而使用它。如果是这样的话,本教程适用于吞咽/非恶魔/肝脏可能会完成您想要做的事情。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39583370

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档