问题标签 [webpack-dev-middleware]

我刚刚使用纱线工作区将我的整体 webpack/koa 项目拆分为多个包。我有一个我称之为“web”的包，它只是 webpack 构建。然后我有另一个称为“服务器”的 koa，它同时为 webpack 工件和 api 提供服务。

我遇到的问题是 webpack 构建似乎在运行时解决了服务器包的依赖关系，因此失败了。

我从我的 web 项目中公开 webpack 编译器，以便在服务器项目的 dev 中使用：

我把它作为中间件放入 Koa 中：

在这里，我使用的是 koa-webpack，但我尝试使用自己的包装手动使用“webpack-dev-middleware”和“webpack-hot-client”，我得到了相同的行为。

我得到的是这样的：

等等。我试图将 deps 添加到我的服务器项目中以填充这些内容，但它是一个我不应该潜入的深兔子洞，不是吗？

使用 webpack-dev-middleware 与 web 构建和 express/koa 服务器节点包分离的正确方法是什么？

我在我的服务器项目中使用 ES6 模块--experimental-modules，这可能是罪魁祸首吗？

我有一个使用 webpack-dev-middleware 提供文件的 webpack 项目。这是服务器设置。

我安装了“dotenv”包并在应用程序的根目录中创建了“development.env”。这个 webpack 配置：

这是 development.env：

只有 NODE_ENV 被定义。其他任何东西都返回未定义

我必须在服务器上做一个魔术，但它不知道怎么做。

我使用了命令行选项并且它有效：

但我仍然不明白为什么它在第一种方法中不起作用。当我使用 webpack-dev-server 时，我的所有其他 spa 应用程序都以这种方式工作。

我正在运行一个非常简单的mern堆栈代码。我正在使用webpack-dev-middleware和webpack-hot-middleware。问题是当我运行时node server.js，编译工作没有错误，但我没有看到我对浏览器上的客户端代码所做的任何更改，即使使用热模块，浏览器也不会自行刷新。也许上述两个问题都是因为我在代码中遗漏了一些东西。

编辑：当我使用 webpackdevmiddleware 时，我的程序正在从磁盘中提取包。例如，如果我清空我的 bundle.js，那么即使服务器打开，我的浏览器实际上也会拉出一个空文件，它可以观察文件更改并成功编译它，但浏览器不会反映它们。感觉就像浏览器不是从任何内存中提取它，而是从磁盘中提取它。

Webpack.config.js：

服务器.js

添加我的开发工具截图

目前正在学习 React JS，对于这些技术我还是新手。

将 webpack 从 4.30.0 更新到 5.10.0 然后我运行npm start后，出现如下一些错误。我尝试删除node_modules并重新安装，然后npm start，它不会改变任何东西。

依赖项：

错误 ：

我已经使用 express 以及 webpack-dev-middleware 和 webpack-hot-middleware 设置了一个服务器，该服务器当前正在接受 .js 文件的模块替换。

这是我目前的设置：

server.js（后端）

webpack.config.js

app.js（前端）

home-guest.ejs（查看）

对文件所做的所有更改app.js都正确使用 HMR，即时替换，无需刷新页面。

但是，要查看home-guest.ejs文件的更改，我必须手动刷新页面。

我知道为了可视化 .ejs 文件的更改，我确实需要刷新。我想做的是让服务器在检测到 .ejs 文件发生更改时自动为我刷新页面。

我正在尝试使用 express + webpack + babel + typescript 实现一个简单的后端应用程序，我已经看到了 webpack-dev-middleware 的示例，其中启动脚本只是“node index.js”，据我所知，在-memory 服务器是使用您的 express 应用程序创建的。但是我怎样才能使用打字稿来实现它呢？我看到的一种可能的解决方案是使用 ts-node 来运行它，但这不会破坏使用 babel 转译的目的吗？我有什么问题吗？这是我的 index.ts

提前致谢！

我是 JavaScript 的新手。为了学习 JavaScript，我从 GitHub ( https://github.com/wbkd/webpack-starter ) 克隆了 webpack-starter 项目。然后，我在npm install桌面上的克隆文件夹中运行 a，然后在 Git Bash 控制台中npm audit fix看到一条消息时运行 a。found 1 low severity vulnerability然后，我看到了这条消息，npm WARN webpack-dev-middleware@3.7.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

在调查上述警告之前，我npm start从项目文件夹中运行了 PowerShell。我没有收到任何错误消息，但我的浏览器 (Chrome) 从未启动。

然后，我调查了这npm WARN条消息，发现了这个，https://stackoverflow.com/a/64733624/9698039，这导致了我，https://github.com/webpack/webpack-dev-server/issues/2807# issuecomment-734982609，这导致我决定将我的 webpack 版本从 ^5.10.0 降级为“webpack”：“^4.0.0”。

在降级之前，这是我的package.json：

这是我的webpack.config.dev.js：

为了降级 webpack，我在 package.json 中更改"webpack": "^5.10.0"为"webpack": "^4.0.0"，然后npm install再次从 Git Bash 运行。

然后，我npm start再次从 PowerShell 运行，再次没有看到任何错误消息，并且我看到了该Compiled successfully消息，但浏览器再次没有启动。似乎 webpack 对等依赖问题与浏览器启动失败问题无关，但我是 JavaScript 新手，因此目前无法 100% 有信心地提出这一主张。

我正在寻找构建一个单页应用程序，但我想将我的登录脚本分开，以便用户在登录之前不必下载整个应用程序。我还想刷新他们登录时的页面，以允许浏览器正确检测以保存密码。我可以让它在生产中正常工作，因为它创建了包含所有文件的 dist/ 文件夹，但是我在为我的开发环境设置它时遇到了问题。我收到一条错误消息，说它找不到我的 signin.html 视图。我正在使用 webpack-dev-middleware 并将 serverSideRender 设置为 true 并将 index 设置为 false。

然后我有两个 HtmlWebpackPlugin 为登录和主应用程序创建一个页面，并将其设置为加载每个页面的特定块：

然后我有一个开发 webpack 配置：

当我启动服务器时，它会告诉我它找不到视图 HTML：

如果我删除“index:false”行，它会加载我的主应用程序代码，但无论他们转到哪个页面，它总是会加载 index.html，这似乎也破坏了我拥有 API 页面的能力，因为它总是呈现主应用程序。

我将如何使用开发中间件为具有不同块或捆绑包的不同页面提供服务？我很确定需要服务器端渲染，但是关于它的文档并不多。由于文件都存储在内存中而不是文件夹中，你如何引用它们res.render()？

我正在努力使用 webpack 开发服务器代理。我正在使用 webpack 5。

目标是拥有带有本地 Apache api (PHP/Laravel) 的 webpack 开发服务器。Webpack 开发服务器具有以下设置：

我希望能够通过代理访问 dummy.com 上的 API。但它不起作用。它总是以 http://localhost 结束。

Windows 10 主机文件：

阿帕奇虚拟主机：

Webpack 开发服务器工作正常，但代理却不行。无论我将什么域放入目标中，它总是代理到 http://localhost。我究竟做错了什么？看起来 Apache 没有收到请求标头，并且代理直接调用 IP。

谢谢你的帮助！

将 webpack 升级到版本 5 后，它会在进行任何更改并保存后一次编译两次，这会增加构建时间。我正在使用 webpack-dev-middleware：“^4.1.0”和 webpack-hot-middleware：“^2.25.0”。

这就是我使用 webpack-dev-middleware 编译 js 的方式

任何人都可以请帮助或建议我如何一次减少构建中的冗余。这是在 webpack 升级到版本 5 之后出现的