# @tinajs/wxml-loader

> wxml loader for webpack 4

Latest version **0.3.0-fork.0** (published 2018-08-12) · 0 weekly downloads

## Install

```sh
npm install @tinajs/wxml-loader
pnpm add @tinajs/wxml-loader
yarn add @tinajs/wxml-loader
bun add @tinajs/wxml-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.3.0-fork.0 |
| Published | 2018-08-12 |
| First published | 2018-08-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | cap32 |
| Maintainers | yelo |
| Keywords | wxml, loader, webpack, wxapp, weapp, mini-program, wechat, alipay |

## Links

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

## Dependencies (3)

- [sax](https://npm.io/package/sax.md) ^1.2.2
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [html-minifier](https://npm.io/package/html-minifier.md) ^3.5.6

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.3.0-fork.0 (latest) — 2018-08-12
- 0.3.1-fork.2 (next) — 2018-12-28
- 0.3.1-fork.1 — 2018-08-30
- 0.3.1-fork.0 — 2018-08-29

## README

# @tinajs/wxml-loader
wxml loader for webpack

**Please note this
[wxml](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/) is a
markup language for
[Wechat mini programs](https://mp.weixin.qq.com/debug/wxadoc/dev/)**

## Difference from original package
The branch you are currently browsing is **forked from [Cap32/wxml-loader](https://github.com/Cap32/wxml-loader)**, but has built-in [Safe-path logic](https://github.com/tinajs/mina-webpack/blob/b23a9a98c2345059a1cb4343563124a49f467804/packages/mina-loader/lib/helpers.js#L90-L94) compatible with [mina-webpack](https://github.com/tinajs/mina-webpack/).

## Installation

```bash
yarn add -D @tinajs/wxml-loader@0.3.1-fork.0
```

## Usage

You may also need to use
[file-loader](https://github.com/webpack-contrib/file-loader) to extract files.

```js
{
  test: /\.wxml$/,
  include: /src/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        useRelativePath: true,
        context: resolve('src'),
      },
    },
    {
      loader: '@tinajs/wxml-loader',
      options: {
        root: resolve('src'),
        enforceRelativePath: true,
      },
    },
  ],
}
```

##### Options

* `root` (String): Root path for requiring sources
* `enforceRelativePath` (Boolean): Should be true if you wish to generate a
  `root` relative URL for each file. **It is recommend to set to `true`**
* `publicPath` (String): Defaults to webpack
  [output.publicPath](https://webpack.js.org/configuration/output/#output-publicpath)
* `transformContent(content, resource)` (Function): Transform content, should
  return a content string
* `transformUrl(url, resource)` (Function): Transform url, should return a url
* `minimize` (Boolean): To minimize. Defaults to `false`
* All
  [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference)
  options are supported

## Known Issues

Currently `wxml-loader` could not resolve dynamic path, i.e.
`<image src="./images/{{icon}}.png" />`. Please use `copy-webapck-plugin` to
copy those resource to dist directory manually. See
https://github.com/Cap32/wxml-loader/issues/1 for detail (Chinese).

## For Alipay mini programs

This loader is also compatible with
[Alipay mini programs](https://mini.open.alipay.com/channel/miniIndex.htm). You
just need to make sure using `test: /\.axml$/` instead of `test: /\.wxml$/` in
webpack config.

If you're using
[wxapp-webpack-plugin](https://github.com/Cap32/wxapp-webpack-plugin) and
setting `Targets.Alipay` as webpack target, it will automatically set
`transformContent()` and `transformUrl()` option by default, the
`transformContent()` function will transform `wx:attr` attribute to `a:attr`,
and the `transformUrl()` function will transform `.wxml` extension to `.axml`
automatically. That means you could write mini programs once, and build both
Wechat and Alipay mini programs.

###### Example

webpack.config.babel.js

```js
import webpack from 'webpack';
import WXAppWebpackPlugin from "wxapp-webpack-plugin";

export default env => ({
  // ...other
  target: (compiler) => compiler.apply(new webpack.LoaderTargetPlugin(env.target || "Wechat"))
  module: {
    rules: [
      // ...other,
      {
        test: /\.wxml$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: `[name].${env.target === "Alipay" ? "axml" : "wxml"}`
              useRelativePath: true,
              context: resolve('src'),
            },
          },
          {
            loader: '@tinajs/wxml-loader',
            options: {
              root: resolve('src'),
              enforceRelativePath: true,
            },
          },
        ]
      }
    ]
  },
  plugin: [
    // ...other
    new WXAppWebpackPlugin()
  ]
});
```

## Related

For a complete guild to use `webpack` to develop `WeiXin App`, please checkout
my [wxapp-boilerplate](https://github.com/cantonjs/wxapp-boilerplate) repo.

## License

MIT

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