webpack之开发环境概念集

webpack

As you've described, Webpack is a module bundler, it bundles various module formats primarily so they can be run in a browser. It offers both a CLI and Node API.

webpack-dev-middleware

Webpack Dev Middleware is middleware which can be mounted in an express server to serve the latest compilation of your bundle during development. This uses webpack's Node API in watch mode and instead of outputting to the file system it outputs to memory.

For comparison, you might use something like express.static instead of this middleware in production.
webpack-dev-server

Webpack Dev Server is itself an express server which uses webpack-dev-middleware to serve the latest bundle and additionally handles hot module replacement (HMR) requests for live module updates in the client.

webpack-hot-middleware

Webpack Hot Middleware is an alternative to webpack-dev-server but instead of starting a server itself it allows you to mount it in an existing / custom express server alongside webpack-dev-middleware.

Also...

webpack-hot-server-middleware

Just to confuse things even more, there's also Webpack Hot Server Middleware which is designed to be used alongside webpack-dev-middleware and webpack-hot-middleware to handle hot module replacement of server rendered apps.

copy form here

• webpack本身只负责打包构建

• webpack-dev-server是一个基于express的并使用了webpack-dev-middleware的开发服务器

• webpack-dev-middleware 是一个用来增强express服务器的功能的中间件，它使得：

  • 每次文件编译后不用写入磁盘，直接写入内存等待请求来取
  • 在监听文件变动时，如果还有文件在编译中，则立即停止当前编译而重新编译，如果此时有请求则延长请求时间直到新的编译完成。

• webpack hot middleware是给webpack-dev-middleware用的，进一步增强服务器功能，使得服务器支持热更新

总结就是：webpack-dev-server包含webpack-dev-middleware和webpack-hot-middleware，是一个可以独立使用的开发服务器；webpack-dev-middleware是一个可以和express配合的开发服务器中间件；express + webpack-dev-middleware+ webpack-hot-middleware （webpack-dev-server就是它们集合实现的一种）可以组成一个支持热更新的静态资源开发服务器。