tag | 33c16a6588d18704a7d726eca9ca5cbe6f7907bf | |
---|---|---|
tagger | Jinjiang <zhaojinjiang@me.com> | Fri Jul 15 13:40:43 2016 +0800 |
object | 3d7c28c8afa8d1b988052a4f03774313e86bead1 |
0.2.3
commit | 3d7c28c8afa8d1b988052a4f03774313e86bead1 | [log] [tgz] |
---|---|---|
author | Jinjiang <zhaojinjiang@me.com> | Fri Jul 15 13:40:43 2016 +0800 |
committer | Jinjiang <zhaojinjiang@me.com> | Fri Jul 15 13:40:43 2016 +0800 |
tree | 5b00e0ce547bed10c460b1ddb0cb758482eae3b2 | |
parent | eb7195edade958f94d7ce7050db9693d043444c5 [diff] |
0.2.3
A webpack loader for Weex.
npm install weex-loader --save
.we
file..js/.css/.tpl
) instead of one .we
file..we
file.make a webpack config
var path = require('path'); var webpack = require('webpack'); var loader = require('weex-loader'); module.exports = { entry: './test/main.we?entry=true', output: { path: './test/actual', filename: 'main.js' }, module: { loaders: [ { test: /\.we(\?[^?]+)?$/, loader: 'weex' } ] } };
main.js as script
module.exports = { data: { text: 'Hello World' } } module.exports.style = require('./main.css'); module.exports.template = require('./main.tpl');
main.css as style
.h1 { font-size: 60px; color: red; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; }
main.tpl as template
<container> <text class="h1">{{text}}</text> </container>
Then change the entry to main.js
in webpack.config.js
loader for script
{ test: /\.js(\?[^?]+)?$/, loader: 'weex?type=script' }
loader for style
{ test: /\.css(\?[^?]+)?$/, loader: 'weex?type=style' }
loader for template
{ test: /\.tpl(\?[^?]+)?$/, loader: 'weex?type=tpl' }
path/to/module.js
in script
like var _ = require('lodash')
.script
.path/to/component.js
in script
like require('./sub.js')
.template
like <sub></sub>
.require('./sub.js?name="goto"')
template
like <goto></goto>
.For examples:
Only your need is chain babel-loader before weex-loader.
{ test: /\.js(\?[^?]+)?$/, loader: 'weex?type=script!babel?presets[]=es2015' }
Only your need is chain scss loader before weex-loader.
{ test: /\.scss(\?[^?]+)?$/, loader: 'weex?type=style!scss' }
npm run test
will run mocha testing
npm run serve
then open localhost:12581
on chrome, will run web testing