问题标签 [webpack-dev-middleware]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
node.js - 刷新时 Webpack-dev-middleware 返回 404
我正在尝试使用 react-redux-app 设置 webpack-dev-middleware。如果我刷新主页,我会收到 200 状态码。但是如果我在任何其他页面('/signin')上刷新,我会收到 404 错误。
经过一番谷歌搜索,我在 Github 上找到了这个:
这有效,但我不知道为什么。我认为 index.html 正在被提供给内存,这不是主页上的问题,而是所有其他页面。具体来说,我无法弄清楚是什么compiler.outputFilesystem
。当我console.log(compiler.outputFilesystem)
,我得到:
具有空属性的对象如何能够将 index.html 提供给内存?
node.js - Webpack、Dev-Middleware 和静态文件
我有一个使用 Express 提供的 Webpack/React/Redux 项目,但我在理解它们如何组合在一起时遇到了一些麻烦。我的 Express 应用程序运行 Webpack 并提供我的根 index.html 文件,如下所示:
然后,我的根索引文件在正文中有“root”标签,在脚本标签中有 Webpack“/static/bundle.js”。根标记指向捆绑在 bundle.js 中的 index.js 文件,并且一切都正确呈现。这一切都很好。
我的问题是我试图将我的 favicon.ico 包含在我的根 index.html 中,它没有与 Webpack 捆绑在一起,所以我想将它作为 Express 的静态文件提供,我通常使用代码执行此操作:
不幸的是,这个文件夹没有被提供给客户端,我无法在 Webpack 包之外访问我的 favicon(我的 index.html 没有自由访问权限)。事实上,我试图以这种方式向客户展示的任何东西都不起作用。我对 webpack-dev-middleware 或 Express 服务器与 Webpack 的工作方式有什么不了解的地方吗?是什么赋予了?
express - webpack-dev-middleware 发布请求错误(vue-cli)
我正在使用 vue-cli 和 web pack 模板为一些现有服务编写 OPA。父服务在 iframe 中加载应用程序并通过 postMessage 为其提供 api 访问权限。然而,在第一次打开时,它似乎发布了一些我不需要的身份验证数据,所以当我在 iframe 中打开时,我的 dev-server express 给了我 404“无法发布 /”。
有没有办法在我的 index.html 上允许 POST 请求?
reactjs - 多错误,找不到模块:错误:React Hot Loader@next Universal Rendering
我在用
这是 webpack 客户端配置条目
},
这是服务器/index.js
现在当我运行服务器时npm run build:dev && babel-node -- dist/SSR.js
我收到此错误。
为什么 Webpack Dev 中间件只尝试解析“/app”中的包。
感谢帮助。
reactjs - webpack-dev-middleware 通过所有路由
我正在使用webpack-dev-middleware以及在客户端上使用 react-router 的反应应用程序。
如果我在根目录下进入应用程序,一切都很好/
,但webpack-dev-middleware
不会提供任何带有路径的东西,比如“/my-route”
我尝试使用通配符,它允许所有路径通过并获取 html 页面,但似乎当页面请求时main.js
,它现在也获取 html 页面,而不是打包的 javascript。
目标是服务器不知道的任何路由,获得与根相同的内容,然后 react-router 将处理在客户端上显示正确的视图(或 404)。
任何帮助将非常感激。
.net - 带有 webpack-dev-middleware 和 webpack-hot-middleware 的 OWIN Selfhost
我想知道是否存在任何用于将 webpack-dev-middleware 和 webpack-hot-middleware 与 OWIN Selfhost full .Net46 集成的 nuget 包,例如 AspNetCore - Microsoft.AspNetCore.SpaServices?
express - 我的 webpack-dev-middleware 设置无法获取 / 错误
首先,我在这里发现了许多类似的主题,但即使参考了它们,我仍然无法让它发挥作用。
所以,我的问题只是我在运行我的快速服务器(使用)后Cannot GET /
访问时进入了 Chrome 。并不是找不到 bundle.js 文件;它根本找不到 index.html。localhost:3000
npm run serve
npm run serve
在 package.json 文件中运行脚本时,我在服务器控制台上看不到任何错误。Webpack 构建(从 Webpack-dev-middleware 调用)日志也没有显示错误。
如果我直接从终端运行 webpack-dev-server 并访问相同的 URL,它可以正常工作。devServer
(我已经通过 中的选项覆盖了主机和端口以匹配我在快速服务器中使用的主机和端口webpack.config.js
。)
我究竟做错了什么?
文件夹结构
webpack.config.js
/dist/index.html
/server/server.js
reactjs - modules:false 时无法导出 webpack.config
在我的 index.js 中,我使用 webpack-dev-middleware/webpack-hot-middleware ,我需要我的 webpack.config 并将其用于编译器。
index.js
我尝试通过require和module.exports 使用Common.js导出我的webpack.config但我收到错误
webpack.config
如果我使用 ES6(我正在使用 babel,这通常有效)在顶部使用import语句而不是 require 和export default而不是 module.exports 我收到此错误
所有这一切都是因为我的.babelrc中的modules:false如果我删除了 Common.js 方式的工作,但我需要这个。如何使用 modules:false 将 webpack.config 导出到编译器
webpack - webpack-dev-middleware 在启动时编译两次
同样webpack.config.js
,webpack-dev-server
在启动时运行一次编译,但我的webpack-dev-middleware
设置在启动时立即编译两次。
我在 chokidar 中添加了一些日志记录,以确保没有发生文件更改并且似乎没有发生。关于如何判断触发第二次编译的任何想法?
webpack - 无法让多应用 webpack 配置与 react-hot-loader 一起使用
我有一个基本设置,两个应用程序分别位于一个单独的目录中,我使用自定义服务器使用webpack-dev-middleware
/编译它们webpack-hot-middleware
。除了我无法让 HMR 为第二个应用程序工作(我正在使用react-hot-loader
)之外,一切都运行良好。
这是说明问题的最小回购:https ://github.com/AmrN/multi-react-app-hmr
我的主要代码文件:
webpack.config.js
服务器.js
(app1|app2)/index.js
现在如果我运行服务器,我的文件编译正确,可以访问http://localhost:3000/app1/index.html
成功,HMR在这里工作正常。但是,如果我访问http://localhost:3000/app2/index.html
它打开的第二个应用程序,但 HMR 无法正常工作并查看控制台,它会给我以下错误:
GET http://localhost:3000/app2/640a44b6b47b67436af2.hot-update.json 404(未找到)
[HMR] 找不到更新(需要完全重新加载)
[HMR](可能是因为重启了服务器)
我注意到的另一件事是更改我在 server.js 中应用我的应用程序 webpack 配置的顺序:
[config1, config2].forEach((config) => {...})
到:
[config2, config1].forEach((config) => {...})
将问题切换到 app1,现在 HMR 适用于 app2 但不适用于 app1。
任何帮助表示赞赏,谢谢。