Question

我尝试使用webpack-dev-middleware作为中间件。我应该在内存中捆绑它并提供JS输出文件，但是当我保存时它不会重新加载。

任何想法？

Answer 1

您希望使用https://www.npmjs.com/package/webpack-hot-middleware或类似内容。

Answer 2

您应该使用webpack-hot-middleware。这是一个有效的例子。我希望它有所帮助。

为您的webpack配置（让我们称之为webpack.config.dev）：

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

const distPath = path.resolve(__dirname, '../dist');
const srcPath = path.resolve(__dirname, '../src');

module.exports = {
  context: srcPath,
  target: 'web',

  entry: [
    'react-hot-loader/patch',
    // activate HMR for React

    // bundling the client for webpack-dev-server
    // and connect to the provided endpoint
    'webpack-hot-middleware/client',

    './client/index.js'
    // the entry point of your app
  ],
  output: {
    filename: 'app.js',
    // the output bundle

    path: distPath,

    publicPath:'/static/',
    // necessary for HMR to know where to load the hot update chunks

    pathinfo: true
  },

  module: {
    rules: [
      // eslint checking before processed by babel
      {test: /\.js$/, enforce: 'pre', loader: 'eslint-loader', exclude:     /node_modules/},
      // babel
      {test: /\.js$/, use: [{loader: 'babel-loader'}], exclude: /node_modules/}
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.DefinePlugin({ "process.env": { NODE_ENV: '"development"' }     })
  ]
};

对于服务器（称为index.dev.js）：

import path from 'path';
import express from 'express';
import React from 'react';
import webpack from 'webpack';

import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

import { renderToString } from 'react-dom/server';

// the above file
import webpackConfig from '../../webpack/webpack.config.dev';

// myown react Html component 
import Html from '../server/Html';

const app = express();
app.use(express.static(path.join(__dirname, '..', './public')));

const compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
  quiet: true,
  noInfo: true,
  publicPath: webpackConfig.output.publicPath,
  stats: { colors: true }
}));
app.use(webpackHotMiddleware(compiler));

app.get('*', (req, res) =>
  res.status(200).send(`<!doctype html>${renderToString(
    <Html />)}`
    // This is my own Html react component. You can send a static html file here as well.
  )
);

app.listen(3000, (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.info('Demo app listening on port 3000');
});

最后我用babel-watch称呼它：

 "scripts": {
    "start:dev": "rm -f ./dist/* && ./node_modules/.bin/babel-watch ./src/server/index.dev.js -w ./src/server",
  },

webpack-dev-middleware不会替换模块

2 个答案: