在没有webpack-dev-server的情况下使用webpack HMR（热模块更换）

我用webpack实现了HMR，它工作正常。当我在控制台中看到它已更新的内容时，我已将它用于服务器包，但我想知道在HMR完成后发送信号给浏览器以重新加载，或者更好，如何在不刷新浏览器吗？在没有webpack-dev-server的情况下使用webpack 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') 
     } 
    }) 
    ] 
}

devServer

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) 
    }) 
}

来源

2017-06-07 Igor-Vuk

的WebPack-dev的服务器设置，将传输更改任何监听客户端的服务器。如果您正在编写自己的服务器应用程序，它将不会是Webpack服务器的客户端。相反，您需要将webpack添加到服务器，以便您的客户端可以连接到它并获取更新。你需要两两件事是：

https://github.com/webpack/webpack-dev-middleware
https://github.com/glenjamin/webpack-hot-middleware

第一个允许的WebPack捆绑你的代码，并从你的服务器应用中投放它。第二个允许它将HMR更新传输给客户端。

注意：webpack-dev-server实际上在内部使用webpack-dev-middleware。它基本上只是一个预先配置的中间件版本。

来源

2017-06-07 16:11:27

你好。感谢你的回答。我用webpack-dev-middleware和webpack-hot-middleware做了一个尝试应用程序，我完全不喜欢它。每当我改变服务器上的某些东西时，我的客户端软件包需要重建，即使我实现了HMR，并且它在不重启服务器的情况下更新后端。一切都很顺利，但是有太多的混帐和两个捆绑。没有很多后端逻辑，一些较小的应用程序没问题。在我将它分成两个捆绑包和两个服务器之后，所有工作都变得更好了。只需要弄清楚如何在没有devServer的情况下进行热插拔。 –

在没有webpack-dev-server的情况下使用webpack HMR（热模块更换）

回答

相关问题