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

我开始与webpack一起使用一个node/express环境来开发一个带有react-routerReactJS服务器端应用程序。 每个webpack软件包在dev和prod(运行时)环境中的作用我都很困惑。

以下是我的理解总结:

webpack :是一个包,一个工具,将不同的Web应用程序组合在一起,然后捆绑到一个.js文件(通常是bundle.js )中。 然后将结果文件提供给prod环境以由应用程序加载,并包含运行代码所需的全部组件。 function包括缩小代码,缩小等。

webpack-dev-server :是一个提供服务器来处理网站文件的软件包。 它还从客户端组件构build一个.js文件( bundle.js ),但将其存储在内存中。 如果还有选项( -hot )来监视所有的构build文件,并且在代码改变的情况下在内存中build立一个新的bundle。 服务器直接在浏览器中提供(例如: http:/localhost:8080/webpack-dev-server/whatever )。 内存加载,热处理和浏览器服务的结合,让用户在代码更改时能够在浏览器上更新应用程序,是开发环境的理想select。

如果我对上述文字有疑问,我真的不确定下面的内容,所以如果有必要请告诉我

当使用webpack-dev-servernode/express时,一个常见的问题是webpack-dev-server是一个服务器,和node/express 。 这使得这个环境很难运行客户端和一些节点/快速代码(一个API等)。 注:这是我所面对的,但将是很好理解为什么会发生在更多的细节…

webpack-dev-middleware :这是一个与webpack-dev-server具有相同function的中间件(inmemory bundling,hot reloading),但格式可以注入到server/express应用程序中。 这样,节点服务器中就有一种服务器( webpack-dev-server )。 糟糕:这是一个疯狂的梦吗? 这件作品如何解决开发和生产方程式,使生活更简单

webpack-hot-middleware :这个… 卡在这里…当findwebpack-dev-middleware时候发现了这一块…不知道如何使用它。

ENDNOTE:对不起有没有错误的想法。 我真的需要帮助,以便在复杂的环境中展现这些变体。 如果方便,请添加更多的包或数据,将构build整个scheme。

webpack

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

webpack-dev-middleware

Webpack开发中间件是一个中间件,可以安装在快速服务器上,以便在开发过程中为您的软件包提供最新的编译 。 这在watch模式下使用webpack的Node API,而不是输出到文件系统输出到内存 。

为了比较,你可能会在生产中使用像express.static而不是这个中间件。

webpack-dev-server

Webpack Dev Server本身就是一个快速的服务器 ,它使用webpack-dev-middleware来为最新的bundle提供服务,并在客户端处理实时模块更新的热模块replace(HMR)请求。

webpack-hot-middleware

Webpack Hot Middleware是webpack-dev-server一个替代品,但不是启动一个服务器本身,而是允许您将其安装在现有的/定制的express服务器以及webpack-dev-middleware

也…

webpack-hot-server-middleware

只是为了混淆事物,还有Webpack热服务器中间件,它被devise成与webpack-dev-middlewarewebpack-hot-middleware来处理服务器渲染应用程序的热模块replace。