首页 文章

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

提问于
浏览
68

我开始使用带有 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-servernode/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 回答

  • 9

    webpack

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

    webpack-dev-middleware

    Webpack Dev Middleware是一个中间件,可以安装在快速服务器中,以便在开发过程中提供最新的软件包编译 . 这在watch mode中使用了 webpack 的Node API,而不是输出到文件系统outputs to memory .

    为了进行比较,您可能会在 生产环境 中使用express.static而不是此中间件 .

    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一起用于处理服务器渲染应用程序的热模块替换 .

  • 89

    截至2018年的更新并考虑its official GitHub page:上的 webpack-dev-server 注释

    维护项目请注意,webpack-dev-server目前处于仅维护模式,短期内不接受任何其他功能 . 大多数新功能请求都可以使用Express中间件完成;请查看使用文档中的前后挂钩 .

    构建webpack HMR的自然选择是什么?

相关问题