我开始使用webpacknode/express环境开发ReactJS服务器端渲染应用程序,使用react-router.我对dev和prod(运行时)环境中每个webpack包的角色感到非常困惑.

以下是我的理解总结:

webpack:是一个包,一个将web应用程序的不同部分连接在一起并Bundle 在一起的工具.js文件(通常是bundle.js).然后,结果文件将在prod环境中提供,由应用程序加载,并包含运行代码所需的所有组件.功能包括缩小代码、缩小尺寸等.

webpack-dev-server:是一个提供server处理网站文件的软件包.它还构建了一个.js文件(bundle.js)来自客户端组件,但在内存中提供.它还可以 Select (-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-servernode/express一起使用时的一个常见问题是,webpack-dev-servernode/express一样都是服务器.这使得这个环境很难同时运行客户端和一些 node /表达式代码(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)在 node 服务器内部.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 101... No idea how to use it.

尾注:抱歉,有任何错误的 idea .我真的需要帮助才能在复杂的环境中理解这些变体.如果方便,请添加更多将构建整个场景的包/数据.

推荐答案

网页包

正如您所描述的,Webpack是一个模块绑定器,它主要绑定各种模块格式,以便在浏览器中运行.它同时提供CLINode API.

网页包-dev-middleware

Webpack Dev中间件是一种中间件,可以安装在express服务器上,在开发过程中为包的latest compilation提供服务.它在watch mode中使用网页包的 node API,而不是将其输出到文件系统outputs to memory.

作为比较,您可能会在生产中使用类似于express.static的中间件,而不是这种中间件.

网页包-dev-server

Webpack Dev Server本身就是一个express server,它使用网页包-dev-middleware来提供最新的Bundle 包,并额外处理客户端中实时模块更新的热模块更换(HMR)请求.

网页包-hot-middleware

Webpack Hot Middleware是网页包-dev-server的替代品,但它不需要启动服务器本身,而是允许您将其与网页包-dev-middleware一起装载到现有/自定义express服务器中.

而且

网页包-hot-server-middleware

更让人困惑的是,还有Webpack Hot Server Middleware,它被设计为与网页包-dev-middleware网页包-hot-middleware一起使用,以处理服务器呈现应用程序的热模块替换.

Node.js相关问答推荐

Node.js promise 循环中的所有多个API调用

在导入时未找到Pupeteer-PAGE-Proxy包

使用NodeJS的DynamoDB中的BatchGetItem出现MultipleValidationError

为什么这个verifyToken函数从未被调用过?

通过 Node js 中的 TBA 执行 netsuite REST upsert 操作出现 401 错误

处理嵌套元素时,使用xml2js库解析XML时发生错误

使用pm2启动服务器

多字段传递获取查询失败

如何更新 MongoDB 中对象数组中的键?

users.watch(在 gmail google api 中)如何收听通知?

在 Javascript 逻辑中访问 EJS 变量

通过 npm 导入 Sass

什么是nestjs错误处理方式(业务逻辑错误vs.http错误)?

在多个文件 node.js 之间共享和修改变量

如何将`yarn.lock`与`package.json`同步?

NODEJS 进程信息

通过 POST 请求将数据从 node.js 服务器发送到 node.js 服务器

安装Node.js 安装n 安装Node.js?

Socket.IO 连接用户数

Puppeteer 等待所有图像加载然后截图