Clone this repo:
  1. dd518d2 Added RETIRED file by Willem Jiang · 3 years, 1 month ago master
  2. 83ac55d upload examples (#78) by Renmin · 4 years, 6 months ago
  3. d0634d7 Merge pull request #82 from cnryb/patch-1 by 任跃兵 · 4 years, 6 months ago
  4. e7f7457 Update package.json by 任跃兵 · 4 years, 7 months ago
  5. 060c47d Merge pull request #81 from apache/feature/license by YorkShen · 4 years, 8 months ago

Weex Loader

A webpack loader for Weex.


npm install weex-loader babel-loader --save


  1. Can load .we file.
  2. Can load parted files(.js/.css/.html) via src attribute.
  3. Can specify a custom language to chain any loader.
  4. Can specify name when require .we file.
  5. Can write es2015 in script.

Upgrade to v0.3

  • Use a different way to load parted files. The old way is deprecated.
  • If you dependent weex-components under v0.1, please update it to v0.2.
  • Just enjoy the new features!
  • Use some hack way to require @weex-module/xxxx in .js file. see issue


How to load a .we file.

make a webpack config

module.exports = {
  entry: './main.we?entry',
  output: {
    path: './dist',
    filename: 'main.js'
  module: {
    loaders: [
        test: /\.we(\?[^?]+)?$/,
        loader: 'weex'

How to write parted files

specify src attribute

<template src="./main.html"></template>
<style src="./main.css"></style>
<script src="./main.js"></script>

add some custom language for loaders

append a weex config in webpack config

  weex: {
    lang: {
      jade: ['jade-html'] // a jade langauge will chain "jade-html-loader"


<template lang="jade">
  text Hello Weex

How to require .we file as component element

  1. first, require a path/to/component.we in script like require('./foo.we') or write inline element like <element name="foo" src="./foo.we"></element>.
  2. second, use it in template like <foo></foo>.
<element name="foo" src="./foo.we"></element>



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('./foo.we?name="fooo"'). Or specify a name attribute in element, like <element name="fooo" src="./foo.we" ></element>
  3. use the name in template like <fooo></fooo>.
<element name="fooo" src="./foo.we"></element>




npm run test

will run mocha testing.

And you can check the specs in test/spec folder.


Knew Issues