Webpack: twig-loader编译 Twig 模板并返回一个函数

Webpack loader for compiling Twig.js templates

文档：

• https://webpack.docschina.org/loaders/#files
• https://github.com/zimmo-be/twig-loader

安装

npm install twig-loader

  

 

  
1
 

配置

webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.twig$/,
        use: {
          loader: 'twig-loader',
          options: {
              // See options section below
          },
        }
      }
    ]
  }
};

  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

vue

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // twig rule loader
    const twigRule = config.module.rule('twig'); // 找到twig-loader
    twigRule.exclude.add(/node_modules/); // 正则匹配排除node_modules目录
    twigRule // 添加新的loader处理
      .test(/\.twig$/)
      .use('twig-loader')
      .loader('twig-loader')
      .end();
  }
};


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

使用

例如：配置一个消息发送的模板

message.html.twig

标题：{{title}}
更多的内容描述

  

 

  
1
  
2
 

// 返回一个函数
// const template = require("./message.html.twig");
import template from './message.html.twig';


// 渲染模板
let html = template({title: 'message title'})

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/125441113