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
问题描述
我开始在具有node/express环境的webpack上开发带有react-router的ReactJS服务器端渲染应用程序.我对每个webpack包在开发和生产(运行时)环境中的作用感到非常困惑.
I'm starting working with webpack with a node/express environment developing a ReactJS server 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:是一个软件包，是一种工具，用于将Web应用程序的不同部分结合在一起，然后捆绑成一个.js文件(通常为bundle.js).然后，结果文件将在产品环境中提供以由应用程序加载，并包含运行代码的所有必需组件.功能包括缩小代码，缩小代码等.
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-dev-server:是一个提供服务器来处理网站文件的软件包.它还从客户端组件构建单个.js文件(bundle.js)，但在内存中提供该文件.它还具有选项(-hot)来监视所有构建文件并在代码更改的情况下在内存中构建新的捆绑软件.服务器直接在浏览器中提供服务(例如:http:/localhost:8080/webpack-dev-server/whatever).内存加载，热处理和浏览器服务的结合使用户可以在代码更改时在浏览器上更新应用程序，非常适合开发环境.
webpack-dev-server: Is a package that offers a server to 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.
如果我对上面的文字有疑问，我真的不确定下面的内容，因此如有必要，请告诉我
If I have doubts about the above text, I'm really not sure about the content below, so please advise me if necessary
将webpack-dev-server与node/express一起使用时，常见的问题是webpack-dev-server是服务器，node/express也是服务器.这使得该环境很难同时运行客户端和某些节点/表达代码(API等). 注意:这是我所面临的，但是很高兴理解为什么会发生更多详细信息...
A common problem when using webpack-dev-server with node/express is that webpack-dev-server is 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-middleware:这是一种中间件，具有与webpack-dev-server相同的功能(内存捆绑，热重装)，但是可以注入server/express应用程序中.这样，您就可以在节点服务器内部拥有某种服务器(webpack-dev-server). 糟糕:这是一个疯狂的梦想吗???这件作品如何解决dev和prod方程并使生活更简单
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/express application. 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-hot-middleware:这个... 被困在这里...在寻找webpack-dev-middleware时发现了这件作品...不知道如何使用它.
webpack-hot-middleware: This... Stuck here... found this piece when looking for webpack-dev-middleware... No idea how to use it.
ENDNOTE:对不起，您有任何错误的想法.我真的需要帮助，以便在复杂的环境中理解这些变体.如果方便，请添加更多可构成整个方案的软件包/数据.
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.
推荐答案
webpack
正如您所描述的，Webpack是一个模块捆绑器，主要捆绑各种模块格式，以便它们可以在浏览器中运行.它同时提供 CLI 和 Webpack开发中间件是一种中间件，可以将其安装在快速服务器中，以在开发过程中为软件包的最新编译提供服务.这会在监视模式中使用webpack的Node API，而不是输出到文件系统输出到内存.
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.
为进行比较，您可以使用
express.static之类的东西来代替生产中的中间件.
For comparison, you might use something like
express.staticinstead of this middleware in production.
webpack-dev-server
Webpack Dev Server本身就是一个快速的服务器，它使用webpack-dev-middleware提供最新的捆绑软件，并另外处理热模块替换(HMR)请求以更新客户端中的实时模块.
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-dev-server的替代方案，但是它无需启动服务器本身，而是允许您将其与webpack-dev-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.
还...
只是让事情更加混乱，还有Webpack Hot Server中间件，该软件旨在与webpack-dev-middleware和webpack-hot-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.
这篇关于Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-Middleware vs etc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
