Verwendung von Webpack HMR (Hot-Modul Ersatz) ohne den Webpack-Dev-Server

Question

Ich habe das HMR mit Webpack implementiert und es funktioniert ok. Wenn ich etwas ändere, sehe ich in der Konsole, dass es aktualisiert wurde, aber da ich es für das Serverbündel benutze, habe ich mich gefragt, ob ich das Signal an den Browser senden soll, nachdem HMR fertig ist, oder besser, wie man Hot Swap ohne Aktualisierung durchführt Browser?

Es funktioniert normalerweise auf der Clientseite, wo ich webpack-dev-server benutze, aber auf der Serverseite, wo ich webpack/hot/poll verwende, muss ich nach jeder Änderung manuell aktualisieren, um es im Browser zu sehen?

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

Answer 1

webpack-dev-Server setzt einen Server auf, die Änderungen an jedem Hören Client übertragen wird. Wenn Sie Ihre eigene Server-Anwendung schreiben, ist dies kein Client des Webpack-Servers. Stattdessen sollten Sie dem Server ein Webpack hinzufügen, damit Ihr Client eine Verbindung zu ihm herstellen und Updates erhalten kann. Sie werden für diese zwei Dinge:

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

Der erste erlaubt webpack Ihren Code zu bündeln und von Ihrem Server App servieren. Die Sekunde ermöglicht es, HMR-Aktualisierungen an den Client zu senden.

Hinweis: webpack-dev-server verwendet intern intern webpack-dev-middleware. Es ist im Grunde nur eine vorkonfigurierte Version der Middleware.