我开始使用带有 node/express
环境的 webpack
开发 ReactJS
服务器端渲染应用程序 react-router
. 我对devpack和prod(运行时)环境中每个webpack包的作用感到非常困惑 .
以下是我的理解摘要:
webpack
:是一个包,一个将Web应用程序的不同部分连接在一起的工具,然后捆绑在一个.js文件中(通常为 bundle.js
) . 然后,结果文件在prod环境中提供,由应用程序加载,并包含运行代码所需的所有组件 . 功能包括缩小代码,缩小等 .
webpack-dev-server
:是一个提供 server 来处理网站文件的包 . 它还从客户端组件构建单个.js文件( bundle.js
),但在内存中提供它 . 它还有选项( -hot
)来监视所有构建文件,并在代码更改时在内存中构建新的bundle . 服务器直接在浏览器中提供(例如: 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
将 webpack-dev-server
与 node/express
一起使用时的一个常见问题是 webpack-dev-server
是服务器, node/express
也是如此 . 这使得运行客户端和某些节点/快速代码(API等)的环境变得棘手 . 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
) . Oops: Is this a crazy dream ??? How can this piece solve the dev and prod equation and makes life simpler
webpack-hot-middleware
:这... Stuck here... found this piece when looking for webpack-dev-middleware... No idea how to use it.
ENDNOTE:对不起,有任何错误的想法 . 我真的需要帮助才能在复杂的环境中找到这些变体 . 如果方便的话,请添加更多将构建整个场景的软件包/数据 .
2 回答
webpack
正如您所描述的,Webpack是一个模块捆绑器,它主要捆绑各种模块格式,因此可以在浏览器中运行 . 它提供CLI和Node API .
webpack-dev-middleware
Webpack Dev Middleware是一个中间件,可以安装在快速服务器中,以便在开发过程中提供最新的软件包编译 . 这在watch mode中使用了
webpack
的Node API,而不是输出到文件系统outputs to memory .webpack-dev-server
Webpack Dev Server本身就是一个快速服务器,它使用
webpack-dev-middleware
来提供最新的捆绑包,并另外处理客户端中实时模块更新的热模块替换(HMR)请求 .webpack-hot-middleware
Webpack Hot Middleware是
webpack-dev-server
的替代品,但它不是启动服务器本身,而是允许您将它安装在现有/自定义快速服务器旁边webpack-dev-middleware
.也...
webpack-hot-server-middleware
只是为了让事情更加混乱,还有Webpack Hot Server Middleware,它与
webpack-dev-middleware
和_2994694一起用于处理服务器渲染应用程序的热模块替换 .截至2018年的更新并考虑its official GitHub page:上的 webpack-dev-server 注释
构建webpack HMR的自然选择是什么?