将JavaScript文件插入到模板中或使用webpack插入HTML

假设我有一个服务器（例如Node&Express），它根据模板文件（如pug、ejs、handlebar、twig、marko…）向客户机提供HTML页面。这是一个经典的多页面网站，每个页面都有自己的JavaScript文件。如果我使用webpack绑定JavaScript文件，是否可以（通过构建步骤）将JavaScript文件自动注入到相应的模板中

我不想生成HTML文件，所以每个基于HTML网页包插件的解决方案都不是我要搜索的。我想用grunt或gulp这样做，但用webpack不必在每个相应的模板中手动导入每个包

没有网页包的解决方案示例：

我在其他帖子中找不到真正的答案

先谢谢你

编辑

这有点管用。我用帕格试过，然后用马科试过，基于答案的速度。我在插入文件时遇到问题，因为我的模板是嵌套的（布局、包装、页面…），并且我没有

头

或

体

，在我想要放置标记的文件中。我使用了

inject:false

和

（仅在v4.0+中可用），它工作正常，但并不完全符合我的预期。这里我们在

/dist/

中创建一个新文件，它不符合我的体系结构。我只想通过模板创建一个bundle，并将其自动注入到正确的模板中

之后，最终的目标是只在模板视图所在的正确文件夹中创建JS文件，然后将其自动注入此视图（按照约定优于配置的方式）。

您可以使用

HtmlWebpackPlugin

将其指向模板来完成此操作。 这是我的节略

webpack.config.js

，我在这里用胡子模板来做这件事

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    entry: "./js/app.js",
  },  
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js",
    chunkFilename:'[name].[chunkhash].js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.ProvidePlugin({
      'React': 'react',
    }),
    new HtmlWebpackPlugin({
      inject: 'head',
      filename: path.resolve(__dirname, './templates/dist/app.mustache'),
      template: path.resolve(__dirname, "./templates/app.mustache"),
      chunks: ['entry'],
      favicon: "./public/favicon.ico"
    }),
  ]
}

这对于代码拆分非常有用，您可以将构建拆分为块，并将多个块注入页面。这样，您可以重用块，浏览器只需在页面之间加载它们一次

---

它不必是胡须，我也可以用php视图来实现。

为了澄清，您已经有了html模板，您希望将js构建注入其中？@SpeedOfRound YesThank。这很接近我想要的。我编辑了我的文章来提供更多的细节。我的想法是在实际应用程序中使用

/dist

中生成的模板，而原始模板就是您开发的模板。您的原始版本无法修改，因为这样它们将随着构建而改变，并且您每次都必须提交更改。你也会累积你的注射量，因为上一次注射会从上次保存下来。我明白这一点，但它并不能真正满足我的需要。我只想将捆绑包文件注入到我的实际模板中。我认为您无法做到这一点。如果输出名称中没有包含

chunkhash

，则可以将路径硬编码到模板中。文件在每次生成时都会更新，但名称保持不变。