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

Question

假設我有一個服務器（例如 Node & Express），它根據模板文件（如 pug、ejs、車把、twig、marko ......）為客戶端提供 HTML 頁面。 這是一個經典的多頁網站，每個頁面都有自己的 JavaScript 文件。 如果我使用 webpack 捆綁 JavaScript 文件，是否可以自動（通過構建步驟）將 Javascript 文件注入到相應的模板中？

我不想生成 HTML 文件，所以每個基於html-webpack-plugin的解決方案都不是我要搜索的。 我想像使用 grunt 或 gulp 那樣做，但使用 webpack 不必在每個相應的模板中手動導入每個包。

沒有 webpack 的解決方案示例：

gulp 注入

后期構建

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

先感謝您。

編輯

它有點工作。 我嘗試使用哈巴狗，然后使用基於 SpeedOfRound 答案的 marko。 我在注入文件時遇到了問題，因為我的模板是嵌套的（布局、包裝器、頁面...），而且我想要放置標簽的文件中沒有head或body 。 我使用inject: false和<%= htmlWebpackPlugin.tags.bodyTags %> （僅在 v4.0 + 中可用）並且它可以工作，但並不完全符合我的預期。 在這里，我們在./dist/中創建一個新文件，它不符合我的架構。 我只想按模板制作一個捆綁包並自動將其注入正確的模板中。

之后，最終目標是在模板視圖所在的正確文件夾中創建 JS 文件，然后它會自動注入到該視圖中（以約定優於配置的方式）。

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

這對於代碼拆分非常有用，您可以在代碼拆分中將構建拆分為塊並將多個塊注入頁面。 這樣你就可以重用塊，瀏覽器只需在頁面之間加載一次。

它不一定是小胡子，我也用 php 視圖來做到這一點。

Answer 2

我看到這個問題是 2 年前提出的，所以你可能解決了這個問題。 但是我花了最后幾天試圖解決這個問題：這是我的解決方案，以防有人遇到同樣的問題：

將 html-webpack-pug-plugin 與 html-webpack-plugin 一起使用。

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    home: "./src/index.js",
  },
  output: {
     path: path.resolve(__dirname, "./public"),
     filename: "[name].js",
     publicPath: "/public",
     clean: true,
  },
  module: {
    rules: [
       {
        test: /\.(css|sass|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: "./views/_head.pug",
      filename: "../views/head.pug",
      minify: false,
      inject: "head",
    }),
    new HtmlWebpackPugPlugin(),
  ],
};

您應該只調用一次HtmlWebpackPugPlugin ，如文檔https://github.com/negibouze/html-webpack-pug-plugin#usage中所述

對於要注入的代碼，模板_head.pug需要有一個body標簽以便代碼被注入 要正確縮進代碼，它還需要有一個html標簽

_head.pug

doctype html
html
  head

  body

構建后：head.pug

doctype html
html
  head
    script(defer src="/public/home.js")
    link(href="/public/home.css" rel="stylesheet")

  body

如果有人感到困惑，home.css 是在 index.js 中導入的（經典的 webpack 魔術）