webpack-dev-middleware

最簡單直接的理解就是運行于內(nèi)存中的文件系統(tǒng), webpack-dev-middleware會在你定義的config文件的基礎上形成一個微型的文件映射系統(tǒng), 每當應用程序請求一個 文件, 它匹配到了就把內(nèi)存中緩存的相對應的結(jié)果作為文件內(nèi)容返回給你, 反之進入下一個中間件.
webpack-dev-server就是一個Express 和 webpack-dev-middleware的實現(xiàn)，兩者之間的區(qū)別是webpack-dev-server 是封裝好了的, 除了config 和命令行參數(shù)之外很難再做定制型的開發(fā)。所以它適合純前端的輔助工具. 而webpack-dev-middleware是一個中間件, 可以編寫自己的后端服務, 然后整合進來

usage

var webpackDevMiddleware = require('webpack-dev-middleware '); 
app.use(webpackDevMiddleware(webpack(...)))

example

 app.use(webpackDevMiddleware(webpack({
        entry:{
            app: "/app.js",
            vendor: "/vendor.js"
        },
        output: {
            path: "/dist"
        },
        publicPath: "/assets/",
        stats: {
            color: true
        },
        ...
    })))

webpack-hot-middleware

是一個結(jié)合 webpack-dev-middleware 使用的middleware, 它可以實現(xiàn)瀏覽器的無刷新更新
Usage And Example

  var webpackHotMiddleware = require('webpack-hot-middleware');
  app.use(webpackHotMiddleware (webpack({...})))

還需要在config文件中配置一下

plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]

結(jié)合實例

    var webpack = require('webpack');
    var webpackConfig = require('./webpack-config.js');  //自己寫的config配置文件
    var compiler = webpack(webpackConfig );
    var devMiddleware = require('webpack-dev-middleware')(compiler({
            noInfo: true,
            publicPath: webpackConfig.output.publicPath
        }));
    var hotMiddleware = require('webpack-hot-middleware')(compiler)

    app.use(devMiddleware);
    app.use(hotMiddleware);