webpack：在 pug 模板中注入 javascript 散列文件名

Question

我正在使用 pug 作为我的 Node.JS 视图引擎。

我正在使用 webpack 捆绑我的 javascript 文件，并使用散列名来清除缓存。

这里的问题是我不知道如何在我的 pug 模板中包含捆绑的 javascript 文件名，因为每次它都会生成一个新的哈希名称。

如何获取从 webpack 生成的哈希名称并将其包含在我的 pug 文件中？

这是包含脚本文件的方式：

doctype html
html
  include _head

  body

    script(src='/_bundle/main.649c4c4e6c8076189257.js')

我的webpack.config.js

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

module.exports = {
  mode: "production",
  entry: "./src/_public/js/index.js",
  output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "src/_public/_bundle"),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader", "css-loader", "sass-loader",
        ],
      },
    ],
  },
  plugins: [
     new HtmlWebpackPlugin({
       filetype: "pug",
     }),
     new HtmlWebpackPlugin({
       filename: "./src/views/base.pug",
     }),
  ],
}

Answer 1

正确配置 HtmlWebpackPlugin 和 HtmlWebpackPugPlugin：

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

module.exports = {
    mode: "production",
    entry: "./src/_public/js/index.js",
    output: {
        filename: "main.[contenthash].js",
        path: path.resolve(__dirname, "src/_public/_bundle"),
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style-loader", "css-loader", "sass-loader",
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPugPlugin(),
        new HtmlWebpackPlugin({
            template: './src/views/base.pug',
            filename: 'layout.pug',
        }),
    ],
}

安装npm i HtmlWebpackPugPlugin。您将在 layout.pug 文件中找到 js 和 css 引用。

webpack：在 pug 模板中注入 javascript 散列文件名

webpack: inject javascript hashed file name in pug template

javascript

node.js

webpack

pug