我用 webpack 实现了 HMR,它工作正常。当我更改某些内容时,我在控制台中看到它已更新,但由于我将它用于服务器包,我想知道如何在 HMR 完成后向浏览器发送信号以重新加载,或者更好的是,如何在不刷新的情况下进行热插拔浏览器?
它在我使用 webpack-dev-server 的客户端正常工作,但在我使用 webpack/hot/poll 的服务器端我需要在每次更改后手动刷新才能在浏览器中看到它吗?
webpack.config.server.js
module.exports = {
...
watch: true,
target: 'node',
node: {
__dirname: true,
__filename: true
},
entry: {
bundle: [
'webpack/hot/poll?1000',
'./src/server/devServer'
]
},
output: {
path: path.join(__dirname, 'src', 'build'),
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
CountdownForm: path.resolve(__dirname, 'src/client/scenes/countdown/components/CountdownForm.jsx'),
...
}
},
externals: [nodeExternals({
whitelist: ['webpack/hot/poll?1000']
})],
...
plugins: [
new StartServerPlugin('bundle.js'),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
title: 'React Timer',
template: 'ejs-loader!./src/server/views/index.ejs'
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
]
}
开发服务器
const server = http.createServer(app)
let currentApp = app
server.listen(PORT, () => {
console.log(`
Express server is up on port ${PORT}
Development environment - Webpack HMR active
`)
})
if (module.hot) {
module.hot.accept('./index', () => {
server.removeListener('request', currentApp)
currentApp = app
server.on('request', app)
})
}
最佳答案
webpack-dev-server 设置一个服务器,将更改传输到任何监听客户端。如果你正在编写自己的服务器应用程序,它不会成为 webpack 服务器的客户端。相反,您需要将 webpack 添加到服务器,以便您的客户端可以连接到它并获取更新。为此,您需要两件事:
https://github.com/webpack/webpack-dev-middleware
https://github.com/glenjamin/webpack-hot-middleware
第一个允许 webpack 捆绑您的代码并从您的服务器应用程序提供它。第二个允许它向客户端传输 HMR 更新。
注意:webpack-dev-server 实际上在内部使用了 webpack-dev-middleware。它基本上只是中间件的预配置版本。
关于reactjs - 在没有 webpack-dev-server 的情况下使用 webpack HMR(热模块替换),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44413642/