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