A webpack loader for Weex.
npm install [email protected] babel-loader babel-preset-es2015 babel-runtime babel-plugin-transform-runtime --save
- Can load
.we
file. - Can load parted files(
.js/.css/.html
) viasrc
attribute. - Can specify a custom language to chain any loader.
- Can specify name when require
.we
file. - Can write es2015 in script.
make a webpack config
module.exports = {
entry: './main.we?entry',
output: {
path: './dist',
filename: 'main.js'
},
module: {
loaders: [
{
test: /\.we(\?[^?]+)?$/,
loader: 'weex'
}
]
}
};
specify src
attribute
<template src="./main.html"></template>
<style src="./main.css"></style>
<script src="./main.js"></script>
append a weex config in webpack config
weex: {
lang: {
jade: ['jade-html'] // a jade langauge will chain "jade-html-loader"
}
}
main.we
<template lang="jade">
div
text Hello Weex
</template>
- first, require a
path/to/component.we
inscript
likerequire('./foo.we')
or write inline element like<element name="foo" src="./foo.we"></element>
. - second, use it in
template
like<foo></foo>
.
<element name="foo" src="./foo.we"></element>
<template>
<div>
<foo></foo>
<bar></bar>
</div>
</template>
<script>
require('./bar.we')
</script>
- By default, the name is the basename without extname of component path.
- Give a name query in require request, like
require('./foo.we?name="fooo"')
. Or specify a name attribute in element, like<element name="fooo" src="./foo.we" ></element>
- use the name in
template
like<fooo></fooo>
.
<element name="fooo" src="./foo.we"></element>
<template>
<div>
<fooo></fooo>
<baar></baar>
</div>
</template>
<script>
require('./bar.we?name=baar')
</script>
npm run test
will run mocha testing.
And you can check the specs in test/spec
folder.
- Build with single template tag
- Build with template and style tags
- Build with template/style/script tags
- Build with single element tag
- Build with multiple element tag
- Build from parted files specifed in
src
attr - Manually Require component and specifies an alias name
- Automaticely require component under some folder
- Build with config/data tag
- Require weex module
- Build by using custom language
- Require commonjs module
- Require weex module in commonjs module
- Build with sourcemap(no test)
Bug
Source Map Offset. Encoding to this problem, please usedevtool:"eval-source-map"
instead ofdevtool:"source-map"
.Bug
Can't set debugger breakpoint. I still don't know the reason, but you can debug withdebugger
keyword.