前に 'html-webpack-plugin'で定義した 'pug-html-loader'によってロードされた.pugテンプレートに変数を渡すことはできますか?html-webpack-pluginからpugテンプレートに変数を渡す
<!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>
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'
}),
]
PugTemplatesとファイルで使用するためにWebpackプラグインで定義されているすべての変数を渡すためにどのように使用できますか?このアプリケーションは、いくつかの静的なページで構成される単純なWebページを作成するための簡単なプロセスであると考えられています。