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