regularjs-loader

webpack loader for regularjs

Here is a simple example using regularjs-loader check it out

Installation

$ npm i regularjs-loader

Usage

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
module.exports = {
    // ...
    entry: './index.js',
    module: {
        loaders: [
            {
                test: /\.rgl$/,
                loader: 'regularjs'
            }
        ]
    },
    regularjs: {
        loaders: {
            css: ExtractTextPlugin.extract( 'css' ),
            mcss: ExtractTextPlugin.extract( 'css!mcss' )
        }
    },
    plugins: [
        // ...
        new ExtractTextPlugin( 'app.css' )
    ]
};

index.js

import App from './App.rgl';
new App().$inject( document.body );

App.rgl

<style>
    html {
        background-color: #F2F2F2;
    }
</style> 
 
<style lang="mcss" scoped>
    .outter {
        .inner {
            color: #000;
        }
    }
</style> 
 
<template>
    <div class="outter">
        <div class="inner">RegularJs is Awesome <Button text="get it"></Button></div>
    </div>
</template>
 
<script>
    import Button from './Button.rgl';
 
    // export options here
    export default {
        // shorthand for registering components in current component scope
        components: {
            'Button': Button,
        },
        init() {
            console.log( 'App' );
        }
    }
</script> 

Button.rgl

<template>
    <button>{ text }</button>
</template>
 
<script>
    import Base from 'path/to/Base.rgl';
 
    // or export component constructor here
    export default Base.extend({
        init() {
            console.log( 'Button' );
        }
    });
</script> 

Try it out!

Related

• regularjs

Thanks

• vue-loader