wwl
webpack-wxml-loader
npm i webpack-wxml-loader
wwl

webpack-wxml-loader

wxml loader for webpack

by Christopher Peng

1.0.0 (see all)TypeScript:Not Found
npm i webpack-wxml-loader
Readme

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

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

License

MIT

Downloads/wk

2

GitHub Stars

29

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

2

OPEN PRs

1
VersionTagPublished
1.0.0
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial