webpack使用art-template

下载

npm i art-template-loader art-template -d

配置

module.exports = {
    module: {
        rules: [
            {
                test: /\.art$/,
                loader: 'art-template-loader'
            }
        ]
    }
 }

使用

1、定义模板
template/header.art

<h1>{{title}}</h1>

template/index.art

{{include './header.art'}}

<p>{{msg1}}</p>
<p>{{msg2}}</p>

2、渲染地址
index.html

<div id="app"></div>

3、渲染
main.js

//获取模板
const render = require('./templates/index.art');
//配置数据
const data = {
    title: '这是art-template页面',
    msg1: '信息一',
    msg2: '信息二'
};
//数据渲染
const html = render(data);
//渲染到页面
const app = document.getElementById('app');
app.innerHTML = html;

完成