Javascript Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc

Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc

提问by Mendes

I'm starting working with webpackwith a node/expressenvironment developing a ReactJSserver side rendered application with react-router. I'm getting very confused about the role of each webpack package for dev and prod (runtime) environments.

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

Here is the summary of my understanding:

以下是我的理解总结：

webpack: Is a package, a tool to join together different pieces of an web application and bundle then in a single .js file (normally bundle.js). The result file is then served in a prod environment to be loaded by the application and contains all necessary components to run the code. Features include shrinking code, minifying, etc.

webpack: 是一个包，一种将 Web 应用程序的不同部分连接在一起并捆绑在单个 .js 文件中的工具（通常为bundle.js）。结果文件随后在 prod 环境中提供给应用程序加载，并包含运行代码所需的所有组件。功能包括收缩代码、缩小等。

webpack-dev-server: Is a package that offers a serverto process the website files. It also builds a single .js file (bundle.js) from client components but serves it in memory. It also has the option (-hot) to monitor all the building files and build a new bundle in memory in case of code changes. The server is served directly in the browser (ex: http:/localhost:8080/webpack-dev-server/whatever). The combination of in memory loading, hot processing and browser serving let the user get the application updated on browser when the code changes, ideal for development environment.

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

If I have doubts about the above text, I'm really not sure about the content below, so please advise me if necessary

如果我对上面的文字有疑问，我真的不确定下面的内容，所以如果需要请给我建议

A common problem when using webpack-dev-serverwith node/expressis that webpack-dev-serveris a server, as is node/express. That makes this environment tricky to run both the client and some node/express code (an API etc.). NOTE: This is what I've faced but would be great to understand why does that happens in more details...

使用webpack-dev-serverwith时的一个常见问题node/express是它webpack-dev-server是一个服务器，就像node/express. 这使得这个环境很难同时运行客户端和一些节点/快速代码（API 等）。注意：这就是我所面临的，但很高兴能更详细地了解为什么会发生这种情况......

webpack-dev-middleware: This is a middleware with same functions of webpack-dev-server(inmemory bundling, hot reloading), but in format that can be injected to the server/expressapplication. In that way, you have a sort of server (the webpack-dev-server) insider the node server. Oops: Is this a crazy dream ??? How can this piece solve the dev and prod equation and makes life simpler

webpack-dev-middleware：这是一个中间件，功能与webpack-dev-server（内存捆绑，热重载）相同，但格式可以注入server/express应用程序。通过这种方式，您webpack-dev-server在节点服务器内部拥有一种服务器（）。 哎呀：这是一个疯狂的梦想？？？这件作品如何解决开发和生产方程并使生活更简单

webpack-hot-middleware: This... Stuck here... found this piece when looking for webpack-dev-middleware... No idea how to use it.

webpack-hot-middleware: 这个……卡在这里……找的时候发现了这个webpack-dev-middleware……不知道怎么用。

ENDNOTE: Sorry is there is any wrong thinking. I really need help in order to undestand these variants in a complex environment. If conveninent, please add more packages/data that will build the whole scenario.

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

回答by riscarrott

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 CLIand Node API.

正如您所描述的，Webpack 是一个模块捆绑器，它主要捆绑各种模块格式，以便它们可以在浏览器中运行。它提供了CLI和Node API。

webpack-dev-middleware

webpack-dev-middleware

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

Webpack Dev Middleware 是一种中间件，可以安装在 express 服务器中，以便在开发过程中为您的 bundle的最新编译提供服务。这webpack在监视模式下使用Node API，而不是输出到文件系统，而是输出到内存。

For comparison, you might use something like express.staticinstead of this middleware in production.

为了进行比较，您可以express.static在生产中使用类似的东西而不是这个中间件。

webpack-dev-server

webpack-dev-server

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

Webpack Dev Server 本身是一个快速服务器，用于webpack-dev-middleware提供最新的包，并额外处理客户端中实时模块更新的热模块替换 (HMR) 请求。

webpack-hot-middleware

webpack-hot-middleware

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

Webpack Hot Middleware 是一种替代方案，webpack-dev-server但它不是启动服务器本身，而是允许您将它与webpack-dev-middleware.

Also...

还...

webpack-hot-server-middleware

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-middlewareand webpack-hot-middlewareto handle hot module replacement of server rendered apps.

更令人困惑的是，还有 Webpack 热服务器中间件，它旨在与服务器渲染的应用程序一起使用webpack-dev-middleware并webpack-hot-middleware处理热模块替换。

回答by Mendes

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

截至 2018 年更新并考虑其官方 GitHub 页面上的webpack-dev-server注释：

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.

维护中的项目 请注意 webpack-dev-server 目前处于仅维护模式，近期内不会接受任何附加功能。大多数新功能请求都可以通过 Express 中间件来完成；请研究在文档中使用 before 和 after 钩子。

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

构建 webpack HMR 的自然选择是什么？