问题标签 [webpack-dev-middleware]

我有一个使用 webpack 4 构建的 React 项目。对于服务器端渲染，我构建了 express 后端并使用webpack-dev-middleware,webpack-hot-middleware和webpack-hot-server-middleware. 此外，还有用于客户端和节点构建版本的 webpack 配置。但是，如果仅使用 webpack 命令单独启动，一切正常，但如果我想启动服务器，它会抛出以下结果：

bootstrap.scss 导入到 index.js 的 app 文件夹中，代码如下：

以下代码来自服务器的 webpack 配置：

这是服务器开发配置：

问题是：第一个代码块中出现错误的原因是什么以及如何解决？

我正在尝试使用webpack-dev-middlewarewebpack-hot-middle-ware、express 和 react 启动并运行我的应用程序。但是当我启动我的代码时，系统没有给我 [hash].hot-update.json 文件。当我更改代码中的某些内容时，系统会重建并提供此类文件，但文件名中的哈希值错误。这是我的代码：

开发服务器的入口点：

我的 webpack.config.js 文件：

我的 package.json 文件：

和我的 server.js 文件：

还需要有关服务器端渲染的任何帮助。

我的项目中没有安装 webpack-dev-middleware，但是当我使用 webpack 构建它时，它会抛出以下警告。

webpack-dev-middleware@1.12.2 需要 webpack@^1.0.0 的 peer || ^2.0.0 || ^3.0.0 但没有安装

以下是我在项目中使用的与 webpack 相关的库。

“webpack”：“^4.15.0”，“webpack-cli”：“^3.0.8”，“webpack-dev-server”：“^3.1.4”，“webpack-node-externals”：“^1.6 .0"

知道如何解决此警告。

我在服务器端有一个 nodejs 应用程序，在客户端有一个 vue 应用程序

我希望我的服务器端在访问某些 url 时为我的客户端提供服务（例如“/”）

我的客户在project_root/frontend我的服务器下project_root/server

这是我的server/app.js文件：

我的 webpack.config.js 文件大多是猜测，是从我创建前端时 vue-cli 为我制作的文件复制而来，所以它可能是错误的，但是在开发模式下运行服务器时的输出 ( export FUNDME_DEV=1) 说它编译成功.

但是，当我尝试访问我的应用程序时，我得到“Cannot GET /”，中间件没有任何作用:(

我不知道我错过了什么，或者我的 webpack 配置应该看起来如何，我发现其他类似的问题都没有帮助。

我该怎么办？

您好，我想将 webpack 与 express 和 webpack-dev-middleware 以及热模块替换一起使用。我收到以下消息，但无论如何浏览器都不会刷新。

我已经坚持了好几天了，所以如果有人能帮助我，那就太棒了。我正在提供我的服务器和 webpack 配置文件。非常感谢您提前。

[HMR] 已连接

app.bundle-26838b.js:1 [HMR] 包在 61968 毫秒内重建

我得到了这个，但浏览器没有刷新。

服务器.js

webpack.config.js

我将url-loader其用作我的 webpack 构建过程的一部分，并且它为我在我的 JS 文件中的任何图像文件正确移动图像文件（或创建 Base64 DataURL 字符串）import，例如：

但是，当在 NodeJS（使用 Express）上进行服务器端渲染时，我看到以下错误：

这是我的 webpack 配置：

因此，我正在尝试将webpack-dev-middleware和webpack-hot-middleware与 HtmlWebpackPlugin 一起使用，为此我遵循了以下链接https://github.com/jantimon/html-webpack-plugin/issues/145 但我真的无法理解这里的建议。

无论如何，我确实在输出 html 中获得了 bundle.js 文件，但 js 没有按预期执行。此外，我确实HMR Connected在控制台中收到消息。不过，这同样适用于我的生产 webpack 文件。

我该如何解决这个问题或着手解决这个问题？

另外，根据下面的项目结构，我提供了多个 html 文件，因此在 srcServer.js 中合并这些文件的任何输入？

包.json

srcServer.js

webpack.config.js

项目结构

铬检查

如果有太多代码需要理解，我已经创建了一个包含所需代码的 repo @ https://github.com/pks90/webpack-dev-and-hot-middleware-sample

我正在使用 webpack-hot-middleware 为 express 应用程序中的 javascript ui 脚本进行热模块替换。每当我启动服务器时，我都会收到此错误：找不到模块：错误：无法解析 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'。

这是我在网络服务器中编译的 webpack 配置：

这是服务器代码中的编译：

在我的构建过程中，webpack 给了我这个错误：

./client/components/App/index.tsx 中的错误 15:9 模块解析失败：意外令牌 (15:9) 您可能需要适当的加载程序来处理此文件类型。

@ ./client/index.tsx 11:4-14:6 12:24-51 @multi react-hot-loader/patch ./client/index.tsx webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload =真

这是我的webpack.config.ts：

我的App.tsx：

我的index.tsx：

我的tsconfig.json：

错误本身似乎给出了解决方案：You may need an appropriate loader to handle this file type.但是，我的理解ts-loader应该能够处理反应。

这webpack.config是团队提供的一个示例，该示例ts-loader用于使用 typescript 和 react 的应用程序中。该设置与我自己的设置非常相似，但是，我不使用webpack-dev-server，而是使用webpack-dev-middleware.

我有一个带有 Webpack Dev Middleware 的 Vue.js 站点（由 HTTP.sys Web 服务器通过 ASP.NET Core 站点提供服务，尽管我猜这并不重要）。有谁知道我如何设置我的网站以在每次热重载事件时清除浏览器的 Javascript 控制台？

这是我能找到的唯一相关链接，但它似乎适用于我没有使用的网络服务器。我不确定为什么特定的 Web 服务器很重要。