Weex Loader
A webpack loader for Weex.
Install
npm install weex-loader babel-loader --save
Features
- 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.
Upgrade to v0.3
- Use a different way to load parted files. The old way is deprecated.
- If you dependent
weex-components
under v0.1, please update it to v0.2. - Just enjoy the new features!
- Use some hack way to require
@weex-model/xxxx
in.js
file. see issue
Usage
.we
file.
How to load a make a webpack config
moduleexports = entry: './main.we?entry' output: path: './dist' filename: 'main.js' module: loaders: test: /\.we?$/ loader: 'weex' ;
How to write parted files
specify src
attribute
add some custom language for loaders
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>
.we
file as component element
How to require - 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>
How to specify the name of a component
- 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>
Test
npm run test
will run mocha testing.
And you can check the specs in test/spec
folder.
Specs
- 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)
- Build weex examples
Knew Issues
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.