Insert webpack hash/chunkhash into pug template
matthewjumpsoffbuildings opened this issue · comments
Im using require.context() to require a bunch of pug files and generate html files
I was hoping there was a way in the webpack.config.js to pass the current hash (or chunkhash even) to the pug templates as local variables that could be used like so
script( src=`js/${hash}.js` )
this also ties in to #23 - i cant seem to pass locals to the pug templates at all
which webpack version do you have?
Im using 2.3.3
please copy your config for the loader here. it should be working I want to test locally to make sure
i havent attempted anything, cause in my webpack config i dont know how to get the current hash variable?
{
loader: "pug-html-loader",
options: {
exports: false,
pretty: PRODUCTION ? false : true,
data: {
foo: "FOO",
webpackHash: what do i put here???
}
}
}
I think you may use any method to create the hash or use the time string as common practice:
data: {
foo: 'FOO',
hash: new Date().getTime().toString('16')
}
If you are trying to reference the scripts/styles to the index.pug I highly recommend to use html-webpack-plugin
:
Which can copy the index to the output path and compile it with the web pack bundle references:
const HtmlPlugin = require('html-webpack-plugin')
{
// webpack config
plugins: [
// your plugins
new HtmlPlugin({
filetype: 'pug',
template: path.join(SOURCE_PATH, 'index.pug'),
hash: true
})
]
}
Im looking to get the hash that webpack itself generates on build, eg the hash that is used in rules like this
"file-loader?name=[hash].css",
any updates on this?
@matthewjumpsoffbuildings were you able to figure this one out?
@matthewjumpsoffbuildings same question
Hey folks. I wrote a webpack plugin that solves this problem.
https://www.npmjs.com/package/webpack-pug-manifest-plugin
Just include pug-manifest.pug
in your index pug file, like so:
include ../dist/pug-manifest.pug
Good luck!