Webpack HMR在快速服务器上请求错误的路径

Question

我正在尝试建立一个快速服务器来开发一个带有热重载的React项目，但HMR的东西由于某种原因请求错误的路径，我无法通过更改“publicPath”选项来修复它。它请求“公共”文件夹，即使这是我的服务器静态文件的文件夹，因此它会导致错误。如何调整配置以便HMR开始工作？这是我在控制台中看到的错误：我的Webpack配置：

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

const tsRules = {
    test: /\.ts(x?)$/,
    use: [
        {loader: 'react-hot-loader/webpack'},
        {loader: 'awesome-typescript-loader'},
    ]
};

const scssRules = {
    test:/\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
};

//All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
const jsRules = {
    enforce: "pre",
    test: /\.js$/,
    loader: "source-map-loader"
};

module.exports = {
  entry: [
    './js/App.tsx',
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '.'
  },
  resolve: {
    extensions:['.ts','.tsx','.js', '.json']
  },
  module: {
    rules: [
        tsRules,
        scssRules
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  externals: {
    //"react": "React",
    //"react-dom": "ReactDOM"
  },
  devtool: '#source-map',
}

Server.js：

import http from 'http';
import express from 'express';
import bodyParser from 'body-parser';
import openBrowser from 'react-dev-utils/openBrowser';

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('../webpack.config');
var compiler = webpack(config);

const app = express();
const port = process.env.PORT || 3090;

//middleware

app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath 
}));
app.use(webpackHotMiddleware(compiler,{
    log: console.log,
    path: '/__webpack_hmr'
}));
app.use(express.static('public'));

const server = http.createServer(app);
server.listen(port, () => {
    console.log('listening on port' + port);
    openBrowser(`http://localhost:${port}/`);
}); 

Answer 1

我也遇到了这个问题，这就是我解决它的方法：

1）在webpack配置中，“入口”配置的顺序很重要，所以将'webpack-hot-middleware / client ...'设置为数组的第一项

2）为中间件定义公共路径，如下所示：

"webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr"

希望这可以帮助！