是否可以将变量传递给我之前在'html-webpack-plugin'中定义的'pug-html-loader'加载的.pug模板?
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'
}),
]
在 layout.html 中,我定义如下:
<!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插件中定义我的PugTemplates和文件中的用法?该应用程序应该是一个简单的创建简单网页的过程,它由几个静态页面组成。
答案 0 :(得分:2)
对于那些对此答案有疑问的人。解决方案是创建一个 templateGenerator
示例:
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(),
};
}
}
globals
是一个函数,该函数返回附加到全局pug范围的简单对象。
答案 1 :(得分:0)
您可以使用InterpolateHtmlPlugin从HTML文件中替换TAG。
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
}),
...
}
您可以从 react-dev-utils npm包安装插件
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
你可以在这里看到完整的例子:
webpack config :https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L9和https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L80-L82
package.json :https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/package.json#L55
答案 2 :(得分:0)
pug-html-loader options
参数接受data
属性,您可以在其中传递配置变量。看到这里:
Pass data to pug using pug-html-loader (cannot read property of undefined)
{
loader: 'pug-html-loader',
options: {
data: {
title: 'Hello World'
}
}
}
答案 3 :(得分:0)
我曾尝试在 HtmlWebpackPlugin 中使用 templateParameters
,但似乎不起作用。
但是在这里general sibling combinator (~
) 找到一个示例,这是一个将变量传递到ejs模板文件中的示例
然后我在 https://github.com/jantimon/html-webpack-plugin/tree/main/examples/template-parameters 得到了答案,它可以将数据传递到 pug 文件中,只需在选项中使用 'data' 属性,如下所示,我在其中添加了一个 'IMG_PREFIX'。
module.exports = {
rules: [
loaders: [{
include: /\.pug/,
loader: ['pug-html-loader'],
options: {
data: {
IMG_PREFIX: '/'
}
}
}]
]
};
然后您可以在 pug 文件中接收变量并使用它 - var imgPrefix = IMG_PREFIX
div.avatar-block
img.avatar(src=imgPrefix+'xxx.jpg')
答案 4 :(得分:0)
您的代码应该可以工作。
您使用 html-loader 有什么特别的原因吗?
尽管没有什么能阻止您在应用程序中使用多个模板,或者如果它们转换得很好,甚至可以链式加载它们;我们通常使用一个模板引擎。现在,我还没有查看 html-loader 源代码,但是从下面提供的链接中发布的评论来看,html-loader 不支持模板参数。它不使用它们,将其向下或向上传递给同一链中的其他加载器。
简而言之,模板参数在 html-loader 中不起作用,这可能是您遇到此问题的原因。
尝试删除 html-loader,看看是否能修复它。