我开始使用webpack
和node/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-server
与node/express
一起使用时的一个常见问题是,webpack-dev-server
和node/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 .我真的需要帮助才能在复杂的环境中理解这些变体.如果方便,请添加更多将构建整个场景的包/数据.