Webpack+vue.js: 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 twig-loader -D

配置

webpack

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

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();
  }
};

使用

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

message.html.twig

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

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


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