webpack html插件,使用Webpack的HTML插件的Handlebars模板 - 传递上下文?

本文档探讨了如何在多页面应用中使用html-webpack-plugin和handlebars-loader,以及如何将信息传递给handlebars模板。作者遇到的问题是如何在webpack配置中为每个页面模板设置不同的元信息。尽管handlebars-loader允许通过`require`设置模板上下文,但作者询问是否可以直接通过html-webpack-plugin注入这些信息到模板中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我正在尝试使用带有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}}

{{myVar}}

{{> ../partials/footer}}

有没有办法通过webpack配置文件将简单的参数/上下文传递给模板文件(例如,页面的元内容)?我意识到有一种方法可以使用 require("./file.hbs") 方法设置上下文,如Handlebars-loader文档中所示,但有没有办法使用html-webpack-plugin将信息注入模板?

谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值