时间戳

首页 > 解决方案 > 如何在开发中的任何路线上提供 HtmlWebpackPlugin 的 index.html 版本？

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

问题描述

阅读此问题后，我了解到 HtmlWebpackPlugin 提供了index.htmlhttp://localhost:8080/index.html 的内存版本，并将捆绑包（在我的情况下为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>

当我访问主页时，http://localhost:8080我在 HTML 检查器中得到这个是正确的：

<!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>

但是，如果我直接在我的应用程序中访问另一条路http://localhost:8080/shop由（由 Node/Express 作为服务器端渲染提供服务），那么我会在 ` 标签底部获得index.html没有捆绑文件的原始版本。.js

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

简单的答案是手动添加vendor.js和app.js进入src/index.html，但会弄乱生产构建，因为它包含对生产中不存在的这些开发文件的引用（它们存在，但带有散列名称）。

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

标签： javascriptnode.jswebpackwebpack-dev-serverhtml-webpack-plugin

解决方案

推荐阅读