如何在开发中的任何路线上提供 HtmlWebpackPlugin 版本的 index.html?

问题描述

阅读 this question 后,我了解到 HtmlWebpackPlugin 在 http://localhost:8080/index.html 提供 index.html 的内存版本并注入包(在我的情况下为 {{1 }} 和 vendors.js) 到文件中。

我在 app.js 中准备了一个 index.html 模板,它是这样的:

/src

当我访问位于 <!doctype html> <html> <head> <Meta charset="utf-8"> </head> <body> <div id="app"></div> <!-- htmlwebpackplugin scripts should inject below --> </body> </html> 的主页时,我在 HTML 检查器中得到了正确的信息:

http://localhost:8080

但是,如果我直接在我的应用程序中访问另一条路线,例如 <!doctype html> <html> <head> <Meta charset="utf-8"> </head> <body> <div id="app"></div> <!-- htmlwebpackplugin scripts should inject below --> <script src="/vendors.js"></script> <script src="/app.js"></script> </body> </html> (由 Node/Express 作为服务器端渲染提供),那么我会得到原始版本的 http://localhost:8080/shop,而没有捆绑的 { ` 标记底部的 {1}} 个文件

如果 HtmlWebpackPlugin 的 index.html 只在根和内存中提供,那么它如何作为 Node/Express 的模板向浏览器发送 HTML? Node/Express 通过查看 .js 并在磁盘上使用该文件来处理路由,而无需 HtmlWebpackPlugin 创建的注入包。

简单的答案是手动将 index.htmlsrc/index.html 添加vendor.js 中,但会混淆生产构建,因为它包含对生产中不存在的这些开发文件的引用(它们存在,但具有散列名称)。

我错过了什么/做错了什么?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)