rioct-loader

rioct templates webpack loader

rioct-loader

rioct-loaderis the webpack loader for Riocttemplates.

Allows to require()template source files directly from JavaScript, letting Webpack compile them and put in the bundle.

Installation

Install in your Webpack build directory with:

npm install --save-dev rioct-loader

Configuration

Modify webpack.config.js(or any other Webpack config file):

module.exports = {
  // ...
  module: {
    // ...
    loaders: [{
      test: /\.tag.html?$/,    // or another file extension of your choice
      loader: "rioct-loader"   // or with options: "rioct-loader?trace=false&brackets={{ }}&useRioctRuntime=true"
    }]
    // ...
  }
  // ...
}

Usage

From JavaScript and React:

// === if it's a stateless component ===
const MyComponent = require("./my-component.tag.html");

// === if it's a stateful component ===
class MyComponent extends React.Component {
   render = require("./my-component.tag.html");
}

ReactDOM.render(React.createElement(MyComponent), document.body);

How it works

When building the bundle, Webpack will intercept all require()with filenames ending in .tag.html, then it calls rioct-clito compile the template and the resulting code is given as result for the require()call.

Repository

https://github.com/nippur72/rioct-loader


上一篇:react-style-tag
下一篇:rioct-cli

相关推荐

  • 还在用字体图标吗,试试svg图标吧(内附vuecli-svg-sprite-loader插件)

    前言,关于字体图标 ​相信每位前端童鞋都对字体图标不陌生,毕竟网页必然少不了用大量的图标来装饰页面效果。在很早的时候,我们一般都是用img来当作图标来使用,由于大量地使用img会造成http请求过多的...

    2 个月前
  • 说说vue-cli中使用flexible和px2rem-loader

    1.下载libflexible 2.在项目中引入libflexible 一般情况在(main.js中引入libflexible) 3.设置meta标签(视情况而定) 4.安装px2r...

    1 年前
  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcssloader的配置,分享给大家,具体如下: 开始 首先配置postcssloader 在这里postcss是为了来给浏览器内核添加私有前...

    2 年前
  • 自己撸个 vue markdown loader

    最近,当我把 vueloader 升级到 v15 后发现,自己项目中所使用的一个 vuemarkdownloader 因为兼容问题而没法用了,正当我一筹莫展的时候,无意间看到 vuepress 中使用...

    2 年前
  • 编写一个webpack loader,用于获取指定目录下的图片,返回图片URL数组

    前言 经常遇到这么一个问题。做h5项目图片资源预加载的时候,我们往往需要手动的拿到一个个图片地址存在数组里面,然后再对其遍历做预加载处理,比如这样: 本着能偷懒就偷懒的心态,我们可以编写一个...

    8 个月前
  • 编写webpack loader和插件

    webpack简介 基本概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。 Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文...

    16 小时前
  • 给 React 组件自动加上 react-hot-loader

    在 React 项目中使用 Webpack HMR 时,通常会使用 reacthotloader(/go/?target=https%3A%2F%2Fgithub.com%2Fgaearon%2Fre...

    1 年前
  • 用 svg-sprite-loader 引入 SVG 以及它的“坑”

    在页面中以 symbol 引用的方式使用 SVG,已经成为目前最完美的图标解决方案。除了使用一些无版权图标网站如 Iconfont 提供的引入方式外,我们还可以在项目中使用 Webpack 来引入自己...

    3 个月前
  • 深入webpack打包原理,loader和plugin的实现

    本文讨论的核心内容如下: webpack进行打包的基本原理 如何自己实现一个loader和plugin 注: 本文使用的webpack版本是v4.43.0, webpackcli版本是v3.3.1...

    2 个月前
  • 手把手教你写一个 Loader

    本文示例源代码请戳github博客(https://github.com/xiangxingchen/blog/tree/master/src/webpack/demo06),建议大家动手敲敲代码。

    1 年前

官方社区

扫码加入 JavaScript 社区