Webpack vs Webpack-dev-server vs Webpack-dev-midware vs Webpack-hot-midware vs etc

我开始使用 webpack和一个 node/express环境开发一个使用 react-router的 ReactJS服务器端呈现应用程序。对于每个 webpack 包在开发和产品(运行时)环境中的作用，我感到非常困惑。

以下是我的理解:

webpack: 是一个包，一个把 Web 应用程序的不同部分连接在一起并捆绑在一起的工具。Js 文件(通常是 bundle.js)。然后，结果文件在应用程序加载的 prod 环境中提供，并包含运行代码所需的所有组件。特性包括缩小代码、缩小等。

webpack-dev-server: 是一个包，提供了一个 服务器来处理网站文件。它还构建了一个单。Js 文件(bundle.js)从客户端组件，但在内存中服务它。它还有一个选项(-hot) ，可以监视所有的构建文件，并在代码更改的情况下在内存中构建一个新的捆绑包。服务器直接在浏览器中服务(例如: http:/localhost:8080/webpack-dev-server/whatever)。内存加载、热处理和浏览器服务的结合，使用户在代码发生变化时可以在浏览器上更新应用程序，是开发环境的理想选择。

如果我对上面的文字有疑问，我真的不知道下面的内容，所以请告诉我，如果必要的

对 node/express使用 webpack-dev-server时的一个常见问题是，webpack-dev-server是一个服务器，node/express也是。这使得这个环境很难同时运行客户机和一些节点/表达式代码(API 等)。注意: 这就是我所面对的，但是如果能够更详细地了解为什么会发生这种情况就好了

webpack-dev-middleware: 这是一个中间件，具有与 webpack-dev-server相同的功能(内存捆绑、热重载) ，但是格式可以注入到 server/express应用程序中。通过这种方式，您在节点服务器内部拥有一种服务器(webpack-dev-server)。这是一个疯狂的梦吗? ? ？这篇文章如何解决开发和驱动方程，并使生活更简单

这是... 卡在这儿了... 找 webpack-dev-middleware的时候发现了这个... 不知道怎么用

对不起，是否有任何错误的想法。我真的需要帮助，以便在一个复杂的环境中理解这些变体。如果方便的话，请添加更多的包/数据来构建整个场景。

34749 次浏览
小开
最佳答案

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.

小开

As of update in 2018 and considering the webpack-dev-server note on its official GitHub page:

Project in Maintenance Please note that webpack-dev-server is presently in a maintenance-only mode and will not be accepting any additional features in the near term. Most new feature requests can be accomplished with Express middleware; please look into using the before and after hooks in the documentation.

What would be the natural choice to build a webpack HMR ?


提交答案