How to inject custom data to pug #15
Replies: 7 comments
-
|
Hello @Mizan-Rifat If you use the You can see the passing data in HtmlWebpackPlugin by using webpack.config.js module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: 'The some page', // avaliable in pug as `htmlWebpackPlugin.options.title`
data: {
key: 'value', // avaliable in pug as `htmlWebpackPlugin.options.data.key`
},
template: path.join(__dirname, 'src/index.pug'),
filename: 'index.html',
}),
],
module: {
rules: [
{
test: /\.pug$/,
loader: '@webdiscus/pug-loader',
options: {
method: 'render', // use this method to render into static HTML
}
},
],
},
};src/index.pug - const externalOptions = htmlWebpackPlugin.options;
- const externalData = htmlWebpackPlugin.options.data;
div Custom title is #{externalOptions.title}
div The value of 'key' is #{externalData.key}Passing data in pug using pug-pluginYou can pass the data into single pug via query parameters: const PugPlugin = require('pug-plugin');
module.exports = {
entry: {
'page01': 'page01.pug?myData=' + JSON.stringify({ title: 'About', options: { uuid: 'abc123' } }),
},
plugins: [
new PugPlugin(),
],
module: {
rules: [
{
test: /\.pug$/,
loader: PugPlugin.loader,
options: {
method: 'render',
}
},
],
},
};page01.pug div Custom title is #{myData.title}
div The UUID is #{myData.options.uuid}This is absolutely legal and documented feature of webpack. For more details, see How to pass custom data from webpack.config.js into the pug template. |
Beta Was this translation helpful? Give feedback.
-
|
@Mizan-Rifat I answered your question, did you succeed? |
Beta Was this translation helpful? Give feedback.
-
|
@webdiscus yes. Thanks for the reply... |
Beta Was this translation helpful? Give feedback.
-
|
@webdiscus hi, in htmlwebpackplugin i can pass a function in data. But in pug-plugin i can't pass the function. Is there any way to do it?? |
Beta Was this translation helpful? Give feedback.
-
|
Hello @Mizan-Rifat, in the next version will be added supports a function in pug-loader option For example, {
loader: PugPlugin.loader,
options: {
method: 'render',
data: {
myData: {
someVar: 'some text',
sum(arg1, arg2) {
return arg1 + arg2;
},
}
},
},
},Usage the passed data In pug template: p The external variable #{myData.someVar}
p The sum is: #{myData.sum(10, 20)}Would this be the solution for you? |
Beta Was this translation helpful? Give feedback.
-
|
@webdiscus yes. that would be great.. |
Beta Was this translation helpful? Give feedback.
-
|
Hello @Mizan-Rifat, new version 2.0.0 supports a function in Note: you can require a JS module and call a lib function directly in pug, see the test case
The bonusThe new version supports the require() of styles and scripts directly in pug without having to define them in a webpack entry. html
head
link(rel='stylesheet' href=require('./styles.scss'))
script(src=require('./main.js'))
bodyOutput: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/css/styles.05e4dd86.css">
<script src="/assets/js/main.f4b855d8.js"></script>
</head>
<body></body>
</html>webpack.config.js const PugPlugin = require('pug-plugin');
module.exports = {
output: {
publicPath: '/',
// js output filename
filename: 'assets/js/[name].[contenthash:8].js',
},
entry: {
// all scripts and styles can be defined directly in pug
'index': './src/index.pug',
},
plugins: [
new PugPlugin({
modules: [
PugPlugin.extractCss({
// css output filename
filename: 'assets/css/[name].[contenthash:8].css',
}),
],
}),
],
module: {
rules: [
{
test: /\.(pug)$/,
loader: PugPlugin.loader,
options: {
method: 'render',
}
},
{
test: /\.scss$/i,
use: ['css-loader', 'scss-loader'],
},
],
},
}; |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Is there any way to inject custom data in pug files like htmlWebpackPlugin.options.data in htmlWebpackPlugin??
Beta Was this translation helpful? Give feedback.
All reactions