__webpack_hmr进入错误的端口，并失败

我想让热重装与我的设置一起工作。目前，它的工作原理是这样 -__webpack_hmr进入错误的端口，并失败

server.js

// this is the main server, which connects to db, serves react components, etc 

const app = express(); 

app.get('/:params?*', (req, res) => { 
    res.status(200).send(` 
    <!doctype html> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     </head> 
     <body> 
     hi 
     <script src="http://localhost:3000/build/client.js"></script> 
     </body> 
    </html> 
    `); 
}); 

... 
app.listen(5000);

gulpfile.babel.js

const CLIENT_DEV_CONFIG = { 
    entry: [ 
    CLIENT_ENTRY, 
    'webpack-hot-middleware/client', 
    'eventsource-polyfill', 
    ], 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
    output: { 
    ...CLIENT_OUTPUT, 
    publicPath: 'http://localhost:3000/build/', 
    }, 
    module: { 
    loaders: [BABEL_LOADER] 
    }, 
} 

gulp.task('client-watch', done => { 
    console.log(CLIENT_DEV_CONFIG.output.publicPath); 
    const opts = { 
    hot: true, 
    publicPath: CLIENT_DEV_CONFIG.output.publicPath, 
    headers: {'Access-Control-Allow-Origin': '*'}, 
    }; 
    const app = new express(); 
    const compiler = webpack(CLIENT_DEV_CONFIG); 
    app.use(webpackDevMiddleware(compiler, opts)); 
    app.use(webpackHotMiddleWare(compiler)); 
    app.listen(3000, (err) => { 
    console.log(err || '[webpack-hot-devserver] running on 3000'); 
    done(); 
    }); 
});

现在

，

如果我访问localhost:5000 。它的工作原理
如果我访问localhost:3000/build/client.js，它也可以

但是，如果我更新的东西我没有得到实时更新，我需要刷新... :(

纵观网络选项卡上，我看到一个失败的请求http://localhost:5000/__webpack_hmr，和我想这可能是致使者。

http://localhost:5000/__webpack_hmr实际上应该是http://localhost:3000/__webpack_hmr

但是，我不知道怎么牛逼Ø更正此

来源

2016-02-17 Stepan Parunashvili

，如下图所示，您可以指定在entry阵列中的线的WebPack配置的网址：

const CLIENT_DEV_CONFIG = { 
    entry: [ 
    CLIENT_ENTRY, 
    `webpack-hot-middleware/client?path=${HOT_SERVER_URL}/__webpack_hmr`, 
    'eventsource-polyfill', 
    ], 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
    output: { 
    ...CLIENT_OUTPUT, 
    publicPath: `${HOT_SERVER_URL}/build/`, 
    }, 
    module: { 
    loaders: [ 
     { 
     ...BABEL_LOADER, 
     query: {...BABEL_QUERY, presets: [...BABEL_QUERY.presets, 'react-hmre']}, 
     }, 
    ], 
    }, 
}

所以这条线具体为：

`webpack-hot-middleware/client?path=${HOT_SERVER_URL}/__webpack_hmr`,

的path选项允许设置热模块重新加载应该命中的位置以访问端点__webpack_hmr。其中例如可以将其设置为：

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

来源

2016-02-17 01:27:12

关键部分是'路径= $ {HOT_SERVER_URL}/__ webpack_hmr'的'的WebPack热中间件/客户端路径= $ {HOT_SERVER_URL}/__ webpack_hmr，就'行？ - 需要一段时间才能找出解决方案。更多的细节在github回购：https：//github.com/glenjamin/webpack-hot-middleware - 我编辑你的答案有更多的细节，因为我一开始并没有得到它。 – Cymen

如果我使用'$ {HOT_SERVER_URL}'我得到：'GET HTTP：//本地主机：6004/$％7BHOT_SERVER_URL％7D/__ webpack_hmr'其中hot_server_url被设置？：/ –

嘿杰米，完整的代码应该是这样的 - > https://github.com/stopachka/universal-js/blob/master/gulpfile.babel.js#L57 （请注意，我还使用反引号''，插入HOT_SERVER_URL） –

__webpack_hmr进入错误的端口，并失败

回答

相关问题