我使用pug作为我的Node.JS视图引擎。
而且我正在使用webpack捆绑我的javascript文件和hashname,以便缓存破坏。
这里的问题是我不知道如何在pug模板中包含捆绑的javascript文件名,因为每次它都会生成一个新的哈希名称。
我怎样才能得到从webpack生成的散列名称,并将其包含在我的pug文件中?
它应该以如下方式包含脚本文件:
doctype html
html
include _head
body
script(src='/_bundle/main.649c4c4e6c8076189257.js')
我的webpack.config文件
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",
}),
],
}
2条答案
按热度按时间aemubtdh1#
正确配置
HtmlWebpackPlugin
和HtmlWebpackPugPlugin
:安装
npm i HtmlWebpackPugPlugin
,您将在layout.pug
文件中找到js和css引用。iqih9akk2#
2022年的实际解决方案。
安装pug-plugin:
使用pug-plugin:
Pug + JS + SCSS的网络包配置:
Pug文件 ./src/视图/索引.pug:
生成的HTML: