Javascript 如何在<；中添加某些脚本标记；头>；及<；车身>；使用HtmlWebackPlugin时的标记_Javascript_Webpack_Html Webpack Plugin

Javascript 如何在<；中添加某些脚本标记；头>；及<；车身>；使用HtmlWebackPlugin时的标记

javascript webpack

Javascript 如何在<；中添加某些脚本标记；头>；及<；车身>；使用HtmlWebackPlugin时的标记,javascript,webpack,html-webpack-plugin,Javascript,Webpack,Html Webpack Plugin,我正在使用HtmlWebpackPlugin用javascript生成HTML文件现在我想在和标记的不同部分添加自定义脚本例如：我怎么, 在内部添加警报（'in head tag'）标记作为第一个子项在内部添加alert（'in body tag'）标记作为第一个子项这是我的网页配置中的代码片段 new HtmlWebpackPlugin({ hash: true, chunks: ["app"], filename:

我正在使用HtmlWebpackPlugin用javascript生成HTML文件

现在我想在

和

标记的不同部分添加自定义脚本

例如：

我怎么,

在内部添加

警报（'in head tag'）

标记作为第一个子项

在内部添加

alert（'in body tag'）

标记作为第一个子项

这是我的网页配置中的代码片段

        new HtmlWebpackPlugin({
        hash: true,
        chunks: ["app"],
        filename: path.resolve(__dirname, "./public/pages/app.html"),
        title: "Title of webpage",
        template: path.resolve(__dirname, "./src/pages/app.page.html"),
        minify: {
            collapseWhitespace: true
        }
    })

您可以使用官方文档中显示的模板参数

你的问题有点让人困惑。这意味着您希望将静态脚本标记添加到模板中。如果是这种情况，您只需要进入

src/pages/app.page.html

文件，并在

头部和正文中添加这两个脚本标记
我猜您要问的是“如何在模板的两个不同区域插入生成的bundle？”。如果是这种情况，文档中会出现一个提示，说明哪些数据传递到模板文件：
"htmlWebpackPlugin": {
  "files": {
    "css": [ "main.css" ],
    "js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
    "chunks": {
      "head": {
        "entry": "assets/head_bundle.js",
        "css": [ "main.css" ]
      },
      "main": {
        "entry": "assets/main_bundle.js",
        "css": []
      },
    }
  }
}

因此，如果您的条目
entry: {
  head: './src/file1.js',
  body: './src/file2.js',
}

你的插件被设置为
new HtmlWebpackPlugin({
  template: './src/pages/app.page.ejs' // note the .ejs extension
})

然后，app.page.ejs
应该能够访问插件中的数据，并且您可以将这些条目放在任何您想要的地方。他们的回购协议中有一笔大额资金。一个更简单的示例和一个更具体的用例是：
<!DOCTYPE html>
<head>
  <% if(htmlWebpackPlugin.files.chunks.head) { %>
  <script src="<%= htmlWebpackPlugin.files.chunks.head.entry %>"></script>
  <% } %>
</head>
<body>
  <% if(htmlWebpackPlugin.files.chunks.body) { %>
  <script src="<%= htmlWebpackPlugin.files.chunks.body.entry %>"></script>
  <% } %>
</body>
</html>

模板看起来像
<!DOCTYPE html>
<head>
  <%
    for (var i=0; i<htmlWebpackPlugin.options.headScripts.length; i++) {
      var script = htmlWebpackPlugin.options.headScripts[i];
  %>
  <script
    <% if(script.src){ %>src="<%= script.src %>"<% } %>
  >
    <% if(script.content){ %><%= script.content %><% } %>
  </script>
  <% } %>
</head>
<body>
  <% if(htmlWebpackPlugin.options.pageContent) { %>
  <%= htmlWebpackPlugin.options.pageContent %>
  <% } %>

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

  <% if (htmlWebpackPlugin.options.googleAnalytics) { %>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    <% if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
      ga('create', '<%= htmlWebpackPlugin.options.googleAnalytics.trackingId%>', 'auto');
      <% } else { throw new Error("html-webpack-template requires googleAnalytics.trackingId config"); }%>
    <% if (htmlWebpackPlugin.options.googleAnalytics.pageViewOnLoad) { %>
      ga('send', 'pageview');
    <% } %>
  </script>
  <% } %>
</body>
</html>


（函数（i，s，o，g，r，a，m）{i['GoogleAnalyticsObject']=r；i[r]=i[r]| |函数（）{
（i[r].q=i[r].q | |[]）.push（参数）}，i[r].l=1*新日期（）；a=s.createElement（o），
m=s.getElementsByTagName（o）[0]；a.async=1；a.src=g；m.parentNode.insertBefore（a，m）
})（窗口，文档，“脚本”，“www.google-analytics.com/analytics.js”，“ga”）；
ga（“创建”、“自动”）；
ga（‘发送’、‘页面浏览’）；
我遇到了同样的问题，这就是我创建插件的原因

-一个HtmlWebpackPlugin
助手，用于向头部注入一些块
它与HtmlWebpackPlugin
一起工作，只需在chunk的名称中添加\u head
，它就会自动将chunk注入头部

这会自动将index
块注入html文档的主体，并将index\u head
注入html文档的头部。最终html看起来像：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Archit's App</title>
    <script type="text/javascript" src="index_head.bundle.js"></script> <--injected in head
  </head>
  </head>
  <body>
    <script src="index_bundle.js"></script> <--injected in body
  </body>
</html>


Archit的应用程序
我很抱歉回答你的问题，但我也有同样的问题，所以被带到了这里
所以…我做了一个插件。这似乎奏效了
这（从2019年11月20日起）可能需要您卸载html网页包插件（当前稳定），然后安装html网页包-plugin@next.
TL；博士：


npm安装-D html网页包注入字符串插件

我制作了一个插件，可以替换或插入htmlWebpackPlugin输出中的文本。
这意味着任何文本，任何地方，只要您搜索的内容在页面上是唯一的（如
标记）
这是怎么做的
html网页包插件为其编译过程提供了挂钩。
我制作了一个插件来搜索输出字符串（编译后），并在搜索的字符串之前、之后或替换之前添加一个自定义字符串
原因如下
我的问题是用Webpack创建一个痛苦最小的Wordpress主题框架，它可以自动化更繁琐的部分。（我知道这是一口）
我需要为浏览器同步注入一个异步脚本标记，以便与页面连接。
但是（像你一样），我找不到一种方法，在没有一点样板的情况下，将脚本普遍附加到页面上
因此，我制作了一个插件，将我需要的字符串放入包含字符串的每个文件中，因为这意味着它是一个完整的页面模板，我希望每个完整的页面模板在更新源文件时自动刷新
它起作用了！
我发现的唯一问题是必须转义已经转义的反斜杠，因为输出在浏览器中实际成为html之前通过编译器运行
所以，请注意，你可能不得不做一些捏造，毫无疑问，还会有人遇到类似的问题
但我会冒险说，这看起来像是你最初要求的解决方案
同样，插件：

如果不是你想要的或者你有问题，请告诉我
 使用此设置
模板：指向html文件的根目录
new HtmlWebpackPlugin({
    title: "chucknorris-app",
    template: "./src/template.html",
}),

也许您可以使用和原始加载程序
顺便说一句，如果您得到[object Module]
结果，您需要使用default
属性

文件
对我来说，最简单的方法是：
//webpüack.config.js
新HtmlWebpackPlugin({
模板：“index.html”，
模板参数：{
foo:process.env.BAR，
},
}),



我知道我迟到了，但我是这样解决的。我可能会帮助别人
我使用inject:false
禁用了自动注入资产
在模板文件中手动渲染资源
头脑中的css
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>



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



您可以在这里进行任何类型的过滤/排序
您可以在此处查看可用选项以及如何使用它们
就像其他元素一样感谢阿德林的评论。你能不能说得更具体一点，我是如何做到这一点的。我遇到了同样的问题。你可以用这个——我真诚地感谢并感谢你在回答我的问题时所付出的努力。我已经在这样做了，我的用例是如何将带有嵌入js代码的标记片段注入到html文件中。我的用例：我有一个多页面的站点，我想在多个页面中插入相同的代码片段，比如Google Analytics，并使用js代码标记
new HtmlWebpackPlugin({
    title: "chucknorris-app",
    template: "./src/template.html",
}),

new HtmlWebpackPlugin({
  hash: true, // hash for cache bursting
  template: "index.html", // source template
  minify: true, // should html file be minified?
  inject: false,
}) 

<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>

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