場景：

node server.js 啟動後端服務器。

npm run dev 啟動前端服務器。

當你需要node的express框架和webpack結合的時候，就會用到題上的兩個依賴。

當然如果只是想用node啟動webpack實現熱更新，那麽webpack-dev-server，就可以實現！詳情見：https://segmentfault.com/a/1190000007374078；

這樣出現的問題就是你在頁面中找不到你寫的API，出現404錯誤（因為事實上你是沒有啟動你的後端服務器）

這個時候就需要webpack-dev-middleware 和 webpack-hot-middleware 了。webpack-dev-middleware是一個處理靜態資源的中間件，前面說的webpack-dev-server是一個小型的Node.js Express

上代碼！

server.js

var text = require(‘./db‘),
    webpack = require(‘webpack‘),
    config = require(‘./webpack.config‘),
    webpackDevMiddleware = require(‘webpack-dev-middleware‘),
    webpackHotMiddleware 
 
= require(‘webpack-hot-middleware‘);

    var compiler = webpack(config);
    config.entry.unshift("webpack-hot-middleware/client?reload=true?http://127.0.0.1:7777/");  
    //將這個添加到webpack配置文件的入口裏面 ?reload=true 設置瀏覽器是否自動刷新；

    app.use(webpackDevMiddleware(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath
    }))
    app.use(webpackHotMiddleware(compiler))
    app.listen(
 
7777);

webpack.config.js

// ?reload=true        設置瀏覽器是否自動刷新；

    entry: [
        ‘./main.js‘
    ],

    output: {
        path: __dirname + ‘/‘,
        publicPath: ‘/‘,
        filename: ‘index.js‘,
    },

webpack-dev-middleware 和 webpack-hot-middleware 實現express全棧熱更新。