Home

Awesome

wxml-loader

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

Installation

yarn add -D wxml-loader

Usage

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

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. 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.

Example

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()
  ]
});

Related

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

License

MIT