weex-loader

Weex Loader

A webpack loader for Weex.

Install

npm install weex-loader --save

Feature

1. Can load .we file.
2. Can load parted files(.js/.css/.tpl) instead of one .we file.
3. Can chain any loader you want when write parted files.
4. Can require a CommonJS module.
5. Can specify the name of a component.

Usage

How to load a .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'
      }
    ]
  }
};

How to write parted files

write .js/.css/.tpl anywhere

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

add some loader in webpack config

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'
  }

How to require a CommonJS module

1. first, require a path/to/module.js in script like var _ = require('lodash').
2. then use it in script.

How to embed a composed component

1. first, require a path/to/component.js in script like require('./sub.js').
2. second, use it in template like <sub></sub>.

How to specify the name of a component

1. By default, the name is the basename without extname of component path.
2. Give a name query in require request, like require('./sub.js?name="goto"')
3. use the name in template like <goto></goto>.

Chain your favorite loader

For examples:

write ES2015

Only your need is chain babel-loader before weex-loader.

  {
    test: /\.js(\?[^?]+)?$/,
    loader: 'weex?type=script!babel?presets[]=es2015'
  }

write SCSS

Only your need is chain scss loader before weex-loader.

  {
    test: /\.scss(\?[^?]+)?$/, 
    loader: 'weex?type=style!scss'
  }

Test

npm run test

will run mocha testing

npm run serve

then open localhost:12581 on chrome, will run web testing