willyelm / pug-html-loader

Pug HTML loader for webpack

Home Page:https://github.com/willyelm/pug-html-loader

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

commented

About to set up to try exactly this, so +1 from me. Also #23

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?

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!