在沒有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（熱模塊更換）

回答

相關問題