我正在尝试使用带有html-webpack-plugin和handlebars-loader的handlebar.js模板 . 这将是一个多页面的应用程序;因此,我打算(根据文档)使用html-webpack-plugin的多个实例 . 其中每个都需要一个模板 . 我的问题是,我可以以某种方式将其他信息传递给指定的模板 . 例如,如果我有以下内容:
const HtmlWebPlugin = require("html-webpack-plugin");
const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: "./src/test.ts",
output: {
filename: "[name].js",
path: path.resolve(__dirname, "distr"),
publicPath: '/'
},
module: {
rules: [
{
test: /\.hbs$/,
loader: "handlebars-loader",
},
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new HtmlWebPlugin({
title: "Page One",
filename: "one.html",
template: "src/common/template.hbs"
}),
new HtmlWebpackPlugin({
title: "Page Two",
filename: 'two.html',
template: 'src/assets/template.hbs'
}),
new ExtractTextPlugin("base.css")
]
}
和template.hbs包含一些句柄表达式:
{{> ../partials/header}}
<div id='entry'>
{{myVar}}
</div>
{{> ../partials/footer}}
有没有办法通过webpack配置文件将简单的参数/上下文传递给模板文件(例如,页面的元内容)?我意识到有一种方法可以使用 require("./file.hbs")
方法设置上下文,如Handlebars-loader文档中所示,但有没有办法使用html-webpack-plugin将信息注入模板?
谢谢!