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

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

Webpack loader for compiling Twig.js templates

文档:

安装

npm install twig-loader

配置

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'})
相关文章
|
JavaScript
Webpack Babel (编译ES6/7)
Webpack Babel (编译ES6/7)
80 0
|
3月前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
86 0
|
6月前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
290 3
|
JavaScript 前端开发 中间件
基于React、Redux、Webpack 和 React-Router的项目模板。 #89
基于React、Redux、Webpack 和 React-Router的项目模板。 #89
96 0
|
运维 前端开发
基于React、Mobx、Webpack 和 React-Router的项目模板。 #88
基于React、Mobx、Webpack 和 React-Router的项目模板。 #88
115 0
|
开发工具
(已解决)求助!!!webpack编译失败,vue___jb_tmp___ ,但是加一个回车,或者打个空格就好了..
求助!!!webpack编译失败,.vue___jb_tmp___ (Permission denied)错误解决办法
100 0
|
前端开发
webpack学习笔记(四) 自动编译
webpack学习笔记(四) 自动编译
117 0
node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置
node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置
|
缓存 JSON 资源调度
真香 - Webpack5 新特性之增量编译
webpack作为最使用最广泛的前端打包工具,已经成为前端工程化基础设施的一部分。 webpack5正式发布于2020年10月10号,距离上一个大版本Webpack4更新已经是2年前年了,每个大版本的升级都会有相当多的改变和提升,今天咱们就来看看增量编辑和长期缓存。
313 0
真香 - Webpack5 新特性之增量编译