Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs等
我开始与webpack
一起使用一个node/express
环境来开发一个带有react-router
的ReactJS
服务器端应用程序。 每个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-server
和node/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-middleware
和webpack-hot-middleware
来处理服务器渲染应用程序的热模块replace。