webpack-dev-middleware webpack-hot-middleware

webpack-dev-middleware

最简单直接的理解就是运行于内存中的文件系统, webpack-dev-middleware会在你定义的config文件的基础上形成一个微型的文件映射系统, 每当应用程序请求一个 文件, 它匹配到了就把内存中缓存的相对应的结果作为文件内容返回给你, 反之进入下一个中间件.
webpack-dev-server就是一个Express 和 webpack-dev-middleware的实现，两者之间的区别是webpack-dev-server 是封装好了的, 除了config 和命令行参数之外很难再做定制型的开发。所以它适合纯前端的辅助工具. 而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

是一个结合 webpack-dev-middleware 使用的middleware, 它可以实现浏览器的无刷新更新
Usage And Example

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

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

plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]

结合实例

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