template-loader
template.js的 webpack 编译 loader，同时支持在 rspack 使用。
安装
$ npm install --save @templatejs/runtime # 安装template运行时
$ npm install --save-dev templatejs-loader # 安装template编译插件webpack 配置
配置参数同template.js参数一样，其中 expression 参数会作为获取 template 的表达式。
webpack 4-5，在 webpack.config.js 配置文件中增加如下内容：
module.exports = {
module: {
rules: [
{
test: /\.tmpl/,
use: [
{
loader: 'templatejs-loader',
options: {
sTag: '<%',
eTag: '%>',
expression: 'require("@templatejs/runtime").default',
},
},
],
},
],
},
};webpack 1-3，在 webpack.config.js 配置文件中增加如下内容：
loaders: [
{
test: /\.tmpl/,
loader: 'templatejs-loader',
query: {
sTag: '<#',
eTag: '#>',
sandbox: false, // 沙箱模式
expression: 'require("@templatejs/runtime").default', // webpack 2-4
// expression: 'require("@templatejs/runtime")' // webpack 1
},
},
];新建模版文件 demo.tmpl
<div>
<#=abc#>
</div>
在 js 中require模版文件，并渲染
var tpl = require('./demo.tmpl');
document.getElementById('test').innerHTML = tpl({ abc: 'yanhaijing' });rspack 配置
配置参数同template.js参数一样，其中 expression 参数会作为获取 template 的表达式。
在 rspack.config.js 配置文件中增加如下内容：
module.exports = {
module: {
rules: [
{
test: /\.tmpl/,
use: [
{
loader: 'templatejs-loader',
options: {
sTag: '<%',
eTag: '%>',
expression: 'require("@templatejs/runtime").default',
},
},
],
},
],
},
};新建模版文件 demo.tmpl
<div>
<#=abc#>
</div>
在 js 中require模版文件，并渲染
var tpl = require('./demo.tmpl');
document.getElementById('test').innerHTML = tpl({ abc: 'yanhaijing' });