A webpack loader for Weex.
npm install weex-loader --save
.we
file..js/.css/.tpl
) instead of one .we
file.<we-element>/<wa-element>/<wx-element>/<element>
tag.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