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

如何解决webpack：在 pug 模板中注入 javascript 哈希文件名

我使用 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",}

解决方法

正确配置 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 引用。