webpack-dev-server

webpack 开发流程中的自动刷新, 它是一个静态资源服务器, 只用于开发环境。

和直接在命令行里运行webpack不同的是, webpack-dev-server会把编译后的静态文件全部保存在内存中, 而不会写入到文件目录内。这个少了每次都在变得webpack输出目录。

webpack-dev-server只适用于纯前端的项目, 如果要加入到包含后端服务器的项目中,则需要webpack-dev-middleware和webpack-hot-middleware。

Express本质是一系列middleware的集合, 因此适合Express的webpack开发工具是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);