A webpack loader for Weex.
npm install weex-loader babel-loader --save
- Can load
.wefile. - Can load parted files(
.js/.css/.html) viasrcattribute. - Can specify a custom language to chain any loader.
- Can specify name when require
.wefile. - Can write es2015 in script.
- Use a different way to load parted files. The old way is deprecated.
- If you dependent
weex-componentsunder v0.1, please update it to v0.2. - Just enjoy the new features!
- Use some hack way to require
@weex-module/xxxxin.jsfile. see issue
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.weinscriptlikerequire('./foo.we')or write inline element like<element name="foo" src="./foo.we"></element>. - second, use it in
templatelike<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
templatelike<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 testwill 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
srcattr - 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
BugSource Map Offset. Encoding to this problem, please usedevtool:"eval-source-map"instead ofdevtool:"source-map".BugCan't set debugger breakpoint. I still don't know the reason, but you can debug withdebuggerkeyword.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent