CircleCI Build Status Build status Coverage Status npm version PRs Welcome License

wxml loader for webpack

Please note this wxml is a markup language for Wechat mini programs

yarn add -D wxml-loader

You may also need to use file-loader to extract files.

{
 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,
 },
 },
 ],
}

• 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
• 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 options are supported

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 #1 for detail (Chinese).

This loader is also compatible with Alipay mini programs. You just need to make sure using test: /\.axml$/ instead of test: /\.wxml$/ in webpack config.

If you're using 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.

webpack.config.babel.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()
 ]
});

For a complete guild to use webpack to develop WeiXin App, please checkout my wxapp-boilerplate repo.

MIT