1 file changed
tree: 338c4cc6e069b1b379b69256b95b670270924cab
  1. .eslintrc
  2. .gitignore
  3. .npmignore
  5. README.md
  6. circle.yml
  7. index.js
  8. package.json
  9. src/
  10. test/

Weex Loader

A webpack loader for Weex.


npm install weex-loader --save


  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.


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

    <text class="h1">{{text}}</text>

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'


npm run test

will run mocha testing

npm run serve

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