webpack loader for avalonJs
$ npm i avalon-loaderwebpack.config.js
var ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
module.exports = {
// ...
entry: './index.js',
module: {
loaders: [
{
test: /\.avn$/,
loader: 'avalon'
}
]
},
avalon: {
loaders: {
css: ExtractTextPlugin.extract( 'css' ),
js: 'babel-loader?' + JSON.stringify( {
presets: [
[ "es2015", { loose: true } ]
],
plugins: [ "transform-runtime" ],
comments: false
} )
}
},
plugins: [
// ...
new ExtractTextPlugin( 'app.css' )
]
};index.html
<body>
<div id="app" ms-controller="app">
{{name}}
<ms-test></ms-test>
</div>
</body>index.js
import avalon from 'avalon2'
avalon.define( {
$id: "app",
name: "司徒正美"
} )
import './test.avn'test.avn
<style lang="css">
.container{
border: #f00 2px solid;
padding: 10px;
}
</style>
</style>
<template>
<div class="container">
here is component!
<br>
{{data}}
<ms-inner>
<div slot="content">content of inner</div>
</ms-inner>
</div>
</template>
<script>
import 'inner.avn';
export default {
name: 'ms-test',
defaults:{
data: "this is data"
}
}
</script>inner.avn(use scoped style)
<style scoped>
.container{
border: green 2px solid;
padding: 10px;
margin: 10px;
}
<template>
<div class="container" ms-click="@onClick">
{{data}}
<slot name="content" />
</div>
</template>
<script>
export default {
name: 'ms-inner',
defaults:{
data:'inner data. click here',
onClick(){
console.log('onclick')
}
}
}
</script>Try it out!