使用 webpack 在模板或 HTML 中注入 JavaScript 文件

Question

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

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

不使用 webpack 的解决方案示例：

gulp inject

post build

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

提前谢谢你。

编辑

它有点工作。我尝试使用哈巴狗，然后使用基于 SpeedOfRound 答案的 marko。我在注入文件时遇到问题，因为我的模板是嵌套的（布局、包装器、页面...），而我想要放置标签的文件中没有head 或body。我使用了inject: false 和<%= htmlWebpackPlugin.tags.bodyTags %>（仅在v4.0 + 中可用），它可以工作，但不完全符合我的预期。在这里，我们在./dist/ 中创建了一个新文件，它不符合我的架构。我只想按模板制作一个捆绑包并自动将其注入正确的模板中。

之后，最终目标是在模板视图所在的正确文件夹中创建 JS 文件，然后它会自动注入到该视图中（以约定优于配置的方式）。

Answer 1

您可以通过将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 视图来做这个。