问题标签 [webpack-dev-middleware]

在我们的开发服务器设置中，我们使用 webpack-dev-server 代理设置通过中间件服务器连接 API。有时我们必须更改中间件服务器设置，并且在不更改多个位置的信息的情况下，我们希望将它们保存在一个位置。

因此我们尝试了以下方法，

这不起作用导致 404 错误，因为 URL 模式尚未识别（我们通过捕获 onProxyReq 事件进行检查）。

但是，如果我们在代理部分将 MIDDLEWARE_RESOURCE 替换为“/xyz”，它就可以工作。

这是提供“代理”模式的限制吗？

谢谢

我目前正在使用create-react-app带有 HapiJS 作为代理来提供静态文件。

这是我当前设置的样子：

我nodemon在开发中使用来运行服务器并react-scripts start运行 react-app。现在的问题是，HapiJS 服务器只提供build使用react-scripts build. 我知道为了连接到 webpack 构建，我需要为 HapiJS 使用中间件。

查看webpack 文档，我发现它需要对webpack.config.js文件的引用。但我不能随意使用eject以webpack.config.js根据需要访问。

所以问题是：

• 如何webpack-dev-middleware与 HapiJS 一起设置create-react-app？
• 如何在webpack.config.js不弹出的情况下访问（最好不使用任何第 3 方模块）？

注意：这不是服务器端渲染，我使用 HapiJS 作为代理，因为涉及跨域 API 调用，代理帮助我避免臭名昭著的 CORS 错误并为应用程序提供服务。

最近我遇到了以下问题：我在开发过程中使用 expressJS 框架来处理一些后端的东西，使用 webpack-dev-middleware 来编译资产，似乎 dev-middleware 正在做它的事情 - 编译 css 和 js，因为我看到了一些绿色消息在终端上，但是当我尝试访问我的 js 或 css 文件 - /css/app.css - 404、/js/app.js - 404 等时，我不断收到 404 错误。当我尝试使用 webpack 编译资产时，一切正常很好，我得到编译的 css 和 js 文件没有问题。这里有github repo

应用程序.js

webpack.config.js

我正在构建一个我计划用于未来项目的基础网络服务器。我正在设置一个完整的 javascript 堆栈。我正在使用 Express、Webpack 和 Babel。

问题是在通过 Express 设置 hmr 时，配置文件遇到了验证错误。

配置文件在 webpack-dev-server 和 Express 的基本设置下运行良好。然而，当通过webpack(config)配置错误调用时。

webpack.config.js

webpack.config.babel.js

webpack.common.babel.js

服务器.js

错误

我有一个名为“quasar.styl”的文件：

当它被 webpack 处理时，使用 styl-loader，我得到这个错误：

我有这种感觉，我不明白手写笔的某些内容。它会在哪里寻找文件“~quasar-style”？

该文件来自一个工作样板类 quasar 应用程序，并且quasar-style在应用程序目录中的任何位置都没有调用文件，尤其是 node_modules，这是我收集波浪号告诉它查找的地方。

有任何想法吗？

更新：我在这里上传了类星体样板项目： https ://repl.it/@jmbldwn/Quasar-Boilerplate-2

它不能在 repl.it 上运行，因为它需要 quasar-cli，但你可以在那里看到它生成的所有文件。

当 webpack-dev-server 代理到我的产品环境时，我遇到了问题。生产服务器向我发送“set-cookie”标头，但它是一个数组，我在浏览器的开发服务器响应中看不到它。

此外，当我调试时，我看到很多来自 prod 服务器的标头，但我并没有将它们全部放在浏览器中。如何使 webpack-dev-server 按原样绕过所有标头。

谢谢。

我正在将 Webpack 实现到旧版 Express 前端应用程序中。我已经按照说明实现了 webpack-dev-middleware 和 webpack-hot-middleware，但是我不知道如何实际引用 webpack-dev-middleware 在我的索引文件中构建的内存包。

server.js:

webpack.config.js:

Base view: server/views/index.jade:

注意：如果我禁用webpack-dev-middleware并仅使用 Webpack 构建文件，它们就可以正常工作。问题是（我认为）我在基本 index.jade 视图中使用该路径引用捆绑包的方式。由于 webpack-dev-middleware 将包写入内存而不是文件系统中的那个位置，它试图读取不存在的东西。

引用这些包路径的正确方法是什么，以便它们是来自 webpack-dev-middleware 的内存包？

项目布局：

• /
  • 服务器.js
  • webpack.config.js
  • 服务器/
    • 意见/
    • index.jade（我的基本视图）
  • 上市/
    • js/
      ...

由于 html-webpack-plugin 和 webpack-dev-middleware (webpack-hot-middleware) 互操作中的 HMR 错误，我想在我的 html 文件更改（在开发时）时重新加载页面。

这是我遇到此问题的两个存储库，两者都有问题。

• 展开
• webpack-模板

如何使用此工具重新加载页面？

• 节点.js
• 表达
• webpack-dev-中间件

我有一个标准的文件夹结构，有点像这样：

整个dist文件夹由 webpack 构建，包括index.html刚刚从文件夹中复制的src文件。当我想在开发环境中运行时，该文件index.html需要客户端水合才能工作。如果它们不存在，那么只有服务器端呈现的页面会通过。这样做的问题是，如果不在每次文件更改时完全重建文件夹，我就无法进行任何开发工作，这需要很长时间，而且是一种完全低效的开发方式。/dist/app.js/dist/vendor.jsdist

我的 webpack 客户端构建配置是这样的：

以上仅在我执行时运行npm run build:client。我的开发设置是这样的：

上面的配置永远不会在更改任何其他文件时setup-dev-server.js重建文件夹中的app.js或vendor.js文件，这意味着开发模式毫无意义。./dist我该如何解决这个问题，以便Home.vue对例如的任何更改都会触发重新创建，app.js因此vendor.js我的更新实际上可以工作？

我正在尝试使以下设置正常工作：

• 标准 Aurelia “Hello World” Typescript 应用程序（由 CLI 创建，由 Webpack 构建）
• 由使用 webpack-dev-middleware 的 ExpressJS 应用程序提供服务
• 为了能够在 Aurelia 前端应用程序和 ExpressJS 后端应用程序之间共享代码，一切都结合在一个项目中

我盯着“Hello World”Aurelia 应用程序，将代码移动到一个src/frontend文件夹中，将webpack.config.jstowebpack-frontend.config.js和 npm 脚本重命名为start-frontend等等。经过这些修改，Aurelia 应用程序仍然运行良好。

然后我添加了一个基本的 Express JS 后端应用程序，它有自己的 webpack.config.js、tsconfig.js，当然还有 npm start 脚本，它也可以正常工作。

webpack-dev-middleware最后我试图让 Express 应用程序通过这样的方式启动前端应用程序：

这与直接与 webpack 命令一起使用时可以正常工作的 webpack 配置文件完全相同。但是，像这样，我收到以下错误消息：

谁能给我一些指示，为什么直接在 webpack 中使用相同的配置文件可以正常工作，但在通过 webpack-dev-middleware 使用时会失败？毕竟，它在同一个项目中具有相同的 node_modules，因此具有相同的 webpack 版本，对吧？

或者是否有人可以共享如上所述的工作设置？谢谢！！