javascript - 使用 webpack 在模板或 HTML 中注入(inject) JavaScript 文件

Question

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

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

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

gulp inject

post build

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

提前谢谢您。

编辑

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

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

Answer 1

您可以通过将HtmlWebpackPlugin指向您的模板来完成此操作。这是我的删节版 webpack.config.js，我在其中使用 mustache 模板执行此操作。

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"
    }),
  ]
}

这对于代码分割非常有用，您可以将构建分割成 block 并将多个 block 注入(inject)到页面中。这样您就可以重复使用 block ，并且浏览器只需在页面之间加载它们一次。

它不一定是 mustache ，我也用 php View 来做这个。