webpack：在pug模板中插入javascript哈希文件名

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

我正在使用webpack和hashname绑定我的javascript文件，以进行缓存破坏

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

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

以下是它应该如何包含脚本文件：

doctype html
html
包括头
身体
脚本（src='/_bundle/main.649C4E6C8076189257.js'）

My webpack.config.js

const path=require（“路径”）
const HtmlWebpackPlugin=require（“html网页包插件”）
module.exports={
模式：“生产”，
条目：“./src/_public/js/index.js”，
输出：{
文件名：“main.[contenthash].js”，
path:path.resolve（uu dirname，“src/_public/_bundle”），
},
模块：{
规则：[
{
测试：/\.scss$/,，
使用：[
“样式加载器”、“css加载器”、“sass加载器”，
],
},
],
},
插件：[
新HtmlWebpackPlugin({
文件类型：“帕格”，
}),
新HtmlWebpackPlugin({
文件名：“./src/views/base.pug”，
}),
],
}

正确配置

HtmlWebpackPlugin

和

HtmlWebpackPlugin

：

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引用。

正确配置

HtmlWebpackPlugin

和

HtmlWebpackPlugin

：

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引用