Javascript 网页包开发服务器未使用HtmlWebpackPlugin选项中的模板_Javascript_Webpack_Webpack Dev Server_Html Webpack Plugin

Javascript 网页包开发服务器未使用HtmlWebpackPlugin选项中的模板

javascript webpack

Javascript 网页包开发服务器未使用HtmlWebpackPlugin选项中的模板,javascript,webpack,webpack-dev-server,html-webpack-plugin,Javascript,Webpack,Webpack Dev Server,Html Webpack Plugin,*编辑：示例（希望）更加清晰我肯定这里有些简单的东西我错过了，但我看不到我使用一个HtmlWebPlugin实例，每个页面/入口点有一个模板。当我使用WebpackDevServer时，只有第一个实例真正尊重模板中的内容，其余的只使用简单的html和元标记通过在dev server上使用WriteFilePlugin，或者在没有dev server的情况下简单地构建文件，将文件写入磁盘，可以正确地使用模板。我被难住了期望值：about.html/index.html这是我使用write

*编辑：示例（希望）更加清晰

我肯定这里有些简单的东西我错过了，但我看不到

我使用一个HtmlWebPlugin实例，每个页面/入口点有一个模板。当我使用WebpackDevServer时，只有第一个实例真正尊重模板中的内容，其余的只使用简单的html和元标记

通过在dev server上使用WriteFilePlugin，或者在没有dev server的情况下简单地构建文件，将文件写入磁盘，可以正确地使用模板。我被难住了

期望值：about.html/index.html这是我使用write-file-webpack插件和运行

'webpack--config-webpack.config.js'

得到的结果。Index.html是相同的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <p>About</p>
</body>
</html>

我看不出任何明显的错误，但我对多个页面和网页都是新手

谢谢

**编辑：考虑到写入磁盘的文件很好，感觉wds从何处提供文件或导航到何处可能有问题<代码>本地主机：8080=>html和脚本链接在那里<代码>本地主机：8080/index=>脚本链接，但模板中没有html

localhost:8080/about

=>脚本链接，但同样没有来自模板的html

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\Nick\Javascript\Webpack\test

此处作为参考：

简言之，您需要循环所有块，以插入到最终的html文件中
下面是模板文件中的示例代码

<% for (var chunk in htmlWebpackPlugin.files.js) { %> <script src="<%= htmlWebpackPlugin.files.js[chunk]%>"></script> <% } %>

希望这些帮助，如果我有误解，请不要介意。
此处作为参考：
简言之，您需要循环所有块，以插入到最终的html文件中
下面是模板文件中的示例代码

<% for (var chunk in htmlWebpackPlugin.files.js) { %> <script src="<%= htmlWebpackPlugin.files.js[chunk]%>"></script> <% } %>

希望这有帮助，如果我有误解，请不要介意。
我想你错过了一次检查
我在软件包页面中找到了一个使用HtmlWebpackPlugin的示例，试试看，也许它会对您有所帮助

plugin: { new HtmlWebpackPlugin({ template: '!!ejs-webpack-loader!src/index.ejs' }) }

我想你少了一个装载机
我在软件包页面中找到了一个使用HtmlWebpackPlugin的示例，试试看，也许它会对您有所帮助

plugin: { new HtmlWebpackPlugin({ template: '!!ejs-webpack-loader!src/index.ejs' }) }

好吧，我可能会把我的羞耻感和答案一起贴出来，以防将来对其他人有所帮助
我导航到
localhost:8080/about
而不是
localhost:8080/about.html

脚本在/about处被注入，但模板不是。在/about.html中，使用了脚本和模板。我不知道为什么会有不同，但那是我的问题
好吧，我不妨把我的羞耻感和答案一起贴出来，以防将来对其他人有所帮助
我导航到
localhost:8080/about
而不是
localhost:8080/about.html

脚本在/about处被注入，但模板不是。在/about.html中，使用了脚本和模板。我不知道为什么会有不同，但那是我的问题
您是否尝试过将webpack.common.js文件的
插件部分添加到webpack.dev.js文件中？如果HtmlWebpackPlugin不在您的webpack devserver配置中，您的webpack dev服务器如何知道以您指定的方式使用HtmlWebpackPlugin？尝试将其添加到webpack.dev.js文件中。嘿，Seth，谢谢，我会尝试一下，但是webpack merge不是用webpack.common.js和webpack.dev.js创建一个配置吗？不幸的是，还没有解决这个问题。非常确定webpack.common.js与webpack.dev.js合并到一个配置文件中，因为在前者中添加'devServer:{openPage:'admin'}'，'将打开正确的页面，index.html使用正确的模板。感谢您的回复，您是否尝试将webpack.common.js文件的插件部分添加到webpack.dev.js文件中？如果HtmlWebpackPlugin不在您的webpack devserver配置中，您的webpack dev服务器如何知道以您指定的方式使用HtmlWebpackPlugin？尝试将其添加到webpack.dev.js文件中。嘿，Seth，谢谢，我会尝试一下，但是webpack merge不是用webpack.common.js和webpack.dev.js创建一个配置吗？不幸的是，还没有解决这个问题。非常确定webpack.common.js与webpack.dev.js合并到一个配置文件中，因为在前者中添加'devServer:{openPage:'admin'}'，'将打开正确的页面，index.html使用正确的模板。感谢您的回复Thoughi Shina-尽管在我构建文件时，脚本/css和html被正确插入。当我使用webpack dev server时，它们就不是了。这似乎与您链接的问题略有不同？我一定会尝试一下，因为它可能会改变开发服务器的行为，谢谢。不幸的是，同样的行为。你能给我网页版本信息吗？网页4.44.0。另外，我还注意到webpack dev server在localhost:port处注入html，而不是在localhost:port/index（或/about）处注入html。相关的js脚本以任何方式注入。不确定这是否给出了正在发生的事情的想法？Hi Shina-尽管在我构建文件时，脚本/css和html被正确插入。当我使用webpack dev server时，它们就不是了。这似乎与您链接的问题略有不同？我一定会尝试一下，因为它可能会改变开发服务器的行为，谢谢。不幸的是，同样的行为。你能给我网页版本信息吗？网页4.44.0。另外，我还注意到webpack dev server在localhost:port处注入html，而不是在localhost:port/index（或/about）处注入html。相关的js脚本以任何方式注入。不确定这是否能告诉我们发生了什么？好主意，但不幸的是，它没有起作用。此外，将文件写入磁盘时，它也可以正常工作，所以感觉可能是dev服务器的问题，以及它在哪里或如何提供文件？我在上面提到过，它可以很好地用于 [webpack]相关文章推荐随机文章推荐 Jersey JSON输出中的模糊集合 jersey Jersey未正确序列化对象 jersey Jersey 无法使customer ParamConverterProvider正常工作，DropWizard 0.7 jersey