我开始在开发使用的服务器端渲染应用程序webpack的node/express环境中工作。我对每个Webpack包在开发和生产(运行时)环境中的作用感到非常困惑。ReactJS``react- router
webpack
node/express
ReactJS``react- router
这是我的理解摘要:
webpack:是一个软件包,是一种工具,用于将Web应用程序的不同部分结合在一起,然后捆绑成一个.js文件(通常是bundle.js)。然后,结果文件将在产品环境中提供以由应用程序加载,并包含运行代码的所有必需组件。功能包括缩小代码,缩小代码等。
bundle.js
webpack-dev-server:是一个提供 服务器 以处理网站文件的软件包。它还bundle.js从客户端组件构建单个.js文件(),但将其提供给内存。它还具有选项(-hot)来监视所有构建文件并在代码更改的情况下在内存中构建新的捆绑软件。服务器直接在浏览器中提供服务(例如:)http:/localhost:8080/webpack- dev-server/whatever。内存加载,热处理和浏览器服务的结合使用户可以在代码更改时在浏览器上更新应用程序,非常适合开发环境。
webpack-dev-server
-hot
http:/localhost:8080/webpack- dev-server/whatever
如果我对上面的文字有疑问,我真的不确定下面的内容,因此如有必要请告诉我
当使用一个常见的问题webpack-dev-server有node/express是webpack-dev- server一个服务器,是node/express。这使得该环境很难同时运行客户端和某些节点/表达代码(API等)。 注意:这就是我所面临的,但是如果能理解为什么会更详细地了解这一点,将非常高兴…
webpack-dev- server
webpack-dev-middleware:这是一种中间件,具有webpack-dev- server(内存捆绑,热重装)相同的功能,但是其格式可以注入到server/express应用程序中。这样,您可以webpack-dev- server在节点服务器内部拥有一种服务器()。 糟糕:这是一个疯狂的梦想吗??? 这一部分如何解决dev和prod方程并使生活更简单
webpack-dev-middleware
server/express
webpack-hot-middleware:这… 卡在这里…在寻找时发现了这件作品webpack-dev- middleware…不知道如何使用它。
webpack-hot-middleware
webpack-dev- middleware
ENDNOTE:对不起,有什么错误的想法。我真的需要帮助,以便在复杂的环境中理解这些变体。如果方便,请添加更多可构成整个方案的软件包/数据。
正如您所描述的,Webpack是一个模块捆绑器,主要捆绑各种模块格式,以便它们可以在浏览器中运行。它同时提供CLI和Node API。
middleware)
Webpack Dev Middleware是中间件,可以将其安装在快速服务器中,以在开发过程中为您的软件包提供 最新的编译 。它webpack在监视模式下使用Node API,而不是输出到文件系统,而是输出到内存。
为了进行比较,您可以express.static在生产中使用类似这样的替代中间件的东西。
express.static
dev-server)
Webpack Dev Server本身是一个快速 服务器 ,用于webpack-dev- middleware提供最新的软件包,并另外处理客户端中实时模块更新的热模块替换(HMR)请求。
Webpack Hot Middleware可以替代Webpack Hot Middleware,webpack-dev- server而不是启动服务器本身,它使您可以将其安装在现有的/定制的Express服务器中webpack-dev-middleware。
也…
webpack-hot-server-middleware
server-middleware)
只是为了使事情更加混乱,还有Webpack Hot Server Middleware,该软件旨在与服务器渲染的应用程序一起使用webpack-dev- middleware并webpack-hot-middleware处理服务器的热模块替换。