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

问题描述：

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

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}/`); 
});

答

我也遇到了这个问题，这里是如何我解决了它：

1）里面的webpack配置，“en尝试” CONFIGS事，所以设置‘的WebPack热中间件/客户端......’作为数组

2）定义的公共路径，中间件，像这样的第一个项目：

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

希望这有助于！

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

相关推荐