# weex-loader

> a webpack loader for weex

Latest version **0.7.12** (published 2018-09-26) · 0 weekly downloads

## Install

```sh
npm install weex-loader
pnpm add weex-loader
yarn add weex-loader
bun add weex-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.12 |
| Published | 2018-09-26 |
| First published | 2016-04-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 37.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | terrykingcha |
| Maintainers | balloonzzq, erha19, fkysly, hanks, jinjiang, lvscar, songsiqi, terrykingcha |
| Keywords | weex, loader, webpack, transformer |

## Links

- npm: https://www.npmjs.com/package/weex-loader
- Repository: https://github.com/weexteam/weex-loader
- Homepage: https://github.com/weexteam/weex-loader#readme
- Issues: https://github.com/weexteam/weex-loader/issues
- npm.io page: https://npm.io/package/weex-loader

## Dependencies (14)

- [md5](https://npm.io/package/md5.md) ^2.1.0
- [parse5](https://npm.io/package/parse5.md) ^2.1.5
- [hash-sum](https://npm.io/package/hash-sum.md) ^1.0.2
- [source-map](https://npm.io/package/source-map.md) ^0.5.6
- [weex-styler](https://npm.io/package/weex-styler.md) ^0.3.1
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.4
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.9.2
- [weex-scripter](https://npm.io/package/weex-scripter.md) ^0.1.6
- [weex-templater](https://npm.io/package/weex-templater.md) ^0.3.5
- [weex-vue-loader](https://npm.io/package/weex-vue-loader.md) ^0.7.0
- [weex-transformer](https://npm.io/package/weex-transformer.md) ^0.4.6
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.9.0
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.9.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.7.12 (latest) — 2018-09-26
- 0.4.2-beta (beta) — 2017-01-10
- 0.7.11 — 2018-09-26
- 0.7.10 — 2018-09-26
- 0.7.9 — 2018-07-09
- 0.7.8 — 2018-06-29
- 0.7.7 — 2018-06-12
- 0.7.6 — 2018-06-11
- 0.7.5 — 2018-06-11
- 0.7.4 — 2018-05-23
- 0.7.3 — 2018-04-13
- 0.7.2 — 2018-02-08
- 0.7.1 — 2018-02-07
- 0.7.0 — 2018-02-07
- 0.6.15 — 2018-02-01
- … 45 more at https://npm.io/package/weex-loader/versions

## README

# Weex Loader

A webpack loader for Weex.

## Install

```
npm install weex-loader babel-loader --save
```

## Features

0. Can load `.we` file.
0. Can load parted files(`.js/.css/.html`) via `src` attribute.
0. Can specify a custom language to chain any loader.
0. Can specify name when require `.we` file.
0. 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](https://github.com/weexteam/weex-loader/issues/18#issuecomment-245204349)

## Usage

### How to load a `.we` file.

**make a webpack config**
```javascript
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**
```html
<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**
```javascript
  weex: {
    lang: {
      jade: ['jade-html'] // a jade langauge will chain "jade-html-loader"
    }
  }
```

**main.we**
```
<template lang="jade">
div
  text Hello Weex
</template>
```

### How to require `.we` file as component element

0. 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>`.
1. second, use it in `template` like `<foo></foo>`.

```
<element name="foo" src="./foo.we"></element>

<template>
  <div>
    <foo></foo>
    <bar></bar>
  </div>
</template>

<script>
  require('./bar.we')
</script>
```

### How to specify the name of a component

0. By default, the name is the basename without extname of component path.
1. 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>`
2. use the name in `template` like `<fooo></fooo>`.

```
<element name="fooo" src="./foo.we"></element>

<template>
  <div>
    <fooo></fooo>
    <baar></baar>
  </div>
</template>

<script>
  require('./bar.we?name=baar')
</script>
```

## Test

```bash
npm run test
```
will run mocha testing.

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

## Specs

- [Build with single template tag](test/spec/a.we)
- [Build with template and style tags](test/spec/b.we)
- [Build with template/style/script tags](test/spec/c.we)
- [Build with single element tag](test/spec/d.we)
- [Build with multiple element tag](test/spec/e.we)
- [Build from parted files specifed in `src` attr](test/spec/f.we)
- [Manually Require component and specifies an alias name](test/spec/g.we)
- [Automaticely require component under some folder](test/spec/h.we)
- [Build with config/data tag](test/spec/i.we)
- [Require weex module](test/spec/j.we)
- [Build by using custom language](test/spec/k.we)
- [Require commonjs module](test/spec/l.we)
- [Require weex module in commonjs module](test/spec/m.we)
- [Build with sourcemap(no test)](test/spec/n.we)
- [Build weex examples](test/spec/o.we)

## Knew Issues

- [`Bug` Source Map Offset](https://github.com/webpack/webpack/issues/2145). Encoding to this problem, please use `devtool:"eval-source-map"` instead of `devtool:"source-map"`.
- [`Bug` Can't set debugger breakpoint](#). I still don't know the reason, but you can debug with `debugger` keyword.

---
_Source: https://npm.io/package/weex-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._