问题标签 [webpack-dev-middleware]

我正在开发一个 Webpack 5 插件，我需要手动触发对监视文件的重新编译而不修改它（主要是做一些利基 HMR 的东西）。

我认为最简单的方法是让编译器相信文件已更改。我不想用fs实际更改文件。我查看了 webpack 源代码 - 欺骗 webpack 的NodeWatchFileSystem看起来很hacky。以另一种方式触发重新编译超出了我的范围。

我目前正在升级 Webpack + 相关模块并收到以下错误。这有点令人困惑，因为我们没有指定提到的配置参数。任何帮助，将不胜感激。

我们的 webpackdevServer配置有以下内容：

我设置了一个小型 webpack 项目，它创建了一个 Vue 应用程序包，该包包含在注入应用程序的静态 HTML 文件中。我想用 Typescript 编写组件，所以我在 webapck 配置中包含了 ts-loader。构建过程 - 使用“webpack”命令 - 工作正常，但是当我使用 webpack-dev-server 时遇到了一些麻烦。

当我最初启动服务器时，一切正常：在我的本地服务器上创建并提供包，浏览器正确显示应用程序。但是，当我对源代码进行更改并保存时，重新编译代码时出现 Typescript 错误，告诉我组件的“.vue”文件缺少模块或声明：

要启动服务器，我使用以下命令：

项目的文件夹结构

=======

webpack.config.js

应用程序.js

应用程序.vue

tsconfig.json

@types/vue-shims.d.ts

包.json

我正在按照本教程为配置开发一个节点样式和 webpack Web 应用程序：教程

在教程中建议使用webpack dev 中间件来加速开发。我真的很想使用这个依赖，但我遇到了问题，因为我无法处理 HTTP POST（我可以在不使用它的功能的情况下处理它们）。

在 webpack-dev-middleware 的文档中（参见上面的链接），有一个名为 methods 的属性应该可以工作。正如您将在我的代码中看到的那样，我正在尝试使用它而没有任何结果。

如果我评论第一个 app.use（启用 webpack-dev-middleware 的那个）并取消评论第二个我无法处理 POST 请求。

服务器代码：

我按照 webpack 的官方入门说明设置了一个小测试项目和配置文件。正如他们推荐的那样，我使用带有 webpack 中间件的快速服务器。

设置

server.js：

我的目录文件夹如下所示：

这是我的webpack.config（为此删除了不必要的项目）。

问题

在我的浏览器中运行localhost:3000，快递返回Cannot get /。

在我的浏览器中运行localhost:3000，快递返回Cannot get / index.html。

在我的浏览器中运行localhost:3000/dist/index.html，快递返回Cannot get dist/index.html。

简单地说，我不能接受任何东西。为什么？我的配置说该 dist目录应该用作根目录。

我正在尝试将 webpack-hot-middleware 集成到我的 nodeJS 服务器中。服务器使用自己的复杂逻辑来提供和重定向文件，我使用 webpack-dev-middleware 和 webpack-hot-middleware 作为代理，所以我很难弄清楚如何使中间件与我的服务器。这是我使用它的方式：

在玩弄中间件时，我终于发现，如果我options.path 在这里用 硬编码${__webpack_public_path__}/__webpack_hmr，它可以在我的服务器上工作。当我更改 tsx 文件时，HMR 在浏览器中成功运行。

所以我想看看我如何提取这个价值。我看到这个options.path值来自__resourceQuery但官方文档并没有说太多，我很困惑。有谁知道在哪里以及如何覆盖options.path？

我从静态站点尝试 ssr

我正在使用 vue、webpack、express 开发代码

如果当前问题是在开发模式下，如果改代码刷新一下，接收到的是第一次构建的html文件。

包版本

这是我的完整代码

当我更改此代码中的代码时，我想收到更新的 html 文件

我将 webpack-dev-middleware 放在我的快速路由上，指向/login这个：

webpack 中间件有效，但热重载无效。在wp_hmr_login.js中，我使用 html-webpack-plugin 并在中间件的配置中设置publicPath: '/login/'为等于publicPath: '/'（我已经尝试将这两个设置为其他所有内容，包括、、、output.publicPath删除它等，但它们都给我“无法获取 /xxx”，因为bundle 的位置与 html 插件所期望的位置不同）。在日志中，您可以看到为什么热重载不起作用：. 看起来 webpack 将 hot-update.json 放在或寻找错误的位置。我尝试在以下位置查找文件，但它似乎根本不存在。一个重要的注意事项是，相同的代码结构在我的索引路由上完美运行，它指向. 关于如何解决这个问题的任何想法都会非常有趣。'''/'GET /login/login.b0139afc0a4838fcda0e.hot-update.json 404/main.b0139afc0a4838fcda0e.hot-update.json/

编辑：我发现通过在 hot-update.json?path=/login的末尾添加['webpack-hot-middleware/client...删除 404，实际上我现在可以在控制台中看到：

但热重载仍然无法在不同的路线上工作'/'

在 Webpack 5 中，核心节点模块的 polyfill 被移除，而是需要在 resolve.fallback 属性中列出所需的包。下面是 webpack.config.client.js 文件的解析属性。

我使用 webpack-dev-middleware 和 webpack-hot-middleware 以及 express 来为我的 ssr 应用程序实现 HMR 的好处。

导入配置文件时，后备属性中的那些模块将被解析并以数字形式返回。当配置对象被传递给它的构造函数时，webpack 会抛出一个错误，因为configuration.resolve.fallback属性应该是非空字符串，但是给出了数字。

下面是传递的实际 resolve.fallback 属性，并返回了错误。