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