wxml-loader

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

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

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

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

License

MIT

Cap32/wxml-loader