webpack-dev-middleware和webpack-dev-server的区别

watch mode(观察模式)

动态监听文件的改变并实时打包;每次变更,都将新文件打包到本地,很慢。需要手动刷新页面。

webpack-dev-middleware

生成一个与webpack的compiler绑定的中间件,然后在express启动的服务app中调用这个中间件。
1、通过watch mode,监听资源的变更,然后自动打包
2、快速编译,走内存;
3、返回中间件,支持express的use格式。

webpack-dev-server

它的作用主要是用来伺服资源文件。
原始文件作出改动后,webpack-dev-server会实时的编译,但是最后的编译的文件并没有输出到目标文件夹

区别:

webpack-dev-server主要是express + webpack-dev-middleware + webpack-hot-middleware(热更新)

webpack-dev-server 是封装好的,除了 webpack.config 和命令行参数之外,不适合定制开发。而 webpack-dev-middleware 是中间件,可以编写自己的后端服务然后把它整合进来,相对而言比较灵活自由。