Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cap32/wxml-loader
wxml loader for webpack
https://github.com/cap32/wxml-loader
alipay alipay-mini-program loader mini-program weapp webpack wechat wechat-mini-program wxapp wxml wxml-loader
Last synced: about 2 months ago
JSON representation
wxml loader for webpack
- Host: GitHub
- URL: https://github.com/cap32/wxml-loader
- Owner: Cap32
- License: mit
- Created: 2017-04-13T08:35:03.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-28T13:15:02.000Z (about 6 years ago)
- Last Synced: 2024-11-24T17:43:09.837Z (about 2 months ago)
- Topics: alipay, alipay-mini-program, loader, mini-program, weapp, webpack, wechat, wechat-mini-program, wxapp, wxml, wxml-loader
- Language: JavaScript
- Size: 189 KB
- Stars: 32
- Watchers: 4
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# wxml-loader
[](https://circleci.com/gh/Cap32/wxml-loader)
[](https://travis-ci.org/Cap32/wxml-loader)
[](https://ci.appveyor.com/project/Cap32/wxml-loader)
[](https://coveralls.io/github/Cap32/wxml-loader?branch=master)
[](https://badge.fury.io/js/wxml-loader)
[](http://makeapullrequest.com)
[](https://github.com/Cap32/wxml-loader/blob/master/LICENSE.md)
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/)**
## Installation
```bash
yarn add -D wxml-loader
```
## 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: '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.
``. 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 WXAppWebpackPlugin, { Targets } from "wxapp-webpack-plugin";
export default env => ({
// ...other
target: Targets[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: '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