Webpack HMRがエクスプレスサーバー上で間違ったパスを要求しています

Question

ホットリロードを使用してReactプロジェクトを開発するためにエクスプレスサーバーを設定しようとしていますが、HMRのものが何らかの理由で間違ったパスを要求し、 "publicPath"オプションを変更して修正してください。これは、サーバーの静的ファイルからのフォルダーでも、 "public"フォルダーを要求するため、エラーが発生します。 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の設定の中で、 "enそのようなミドルウェアの公開パスを定義）に設定、問題をコンフィグ 『WebPACKのホット・ミドルウェア/クライアント...』配列

2の最初の項目として」試してみてください。

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

・ホープこれは役に立ちます！