Menu
Is it possible to pass a variable to the .pug template loaded by the 'pug-html-loader' which I defined in the 'html-webpack-plugin' before?
webpack.config.babel.js
...
{
test: /\.pug$/,
use: [
{
loader: 'html-loader'
},
{
loader: 'pug-html-loader',
options: {
self: true
}
}]
}
...
plugins: [
new HtmlWebpackPlugin({
chunks: ['index'],
filename: 'index.html',
template: './src/templates/layout.pug',
title: 'Welcome',
file: 'index'
}),
new HtmlWebpackPlugin({
chunks: ['index', 'contact'],
filename: 'contact.html',
template: './src/templates/layout.pug',
title: 'Contact us',
file: 'contact'
}),
]In a layout.html I have defined as follows:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<main>
${ require('html-loader!../partials/' + htmlWebpackPlugin.options.file + '.html' ) }
</main>
</body>
</html>How can I use it to pass all variables - defined in the Webpack plugin for the usage in my PugTemplates and files? The application is supposed to be a simple process for creating simple webpages, which consists of several static pages.
455
For those that are having trouble with this answer. The solution is to create a templateGenerator
Example:
new HTMLWebpackPlugin({
inject: true,
templateParameters: paramGenerator(globals), // <--- Here
template: '/mytemplate.pug',
}),
import { environment } from '../environment';
export function paramGenerator(globals: () => {[key: string]: any}) {
return (compilation, assets, assetTags, options) => {
return {
compilation: compilation,
webpackConfig: compilation.options,
htmlWebpackPlugin: {
tags: assetTags,
files: assets,
options: options
},
environment,
...globals(),
};
}
}
Where globals is a function that returns a simple object that is attached to your global pug scope.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
