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: loader: 'wxml-loader' options: root: enforceRelativePath: true
Options
root
(String): Root path for requiring sourcesenforceRelativePath
(Boolean): Should be true if you wish to generate aroot
relative URL for each file. It is recommend to set totrue
publicPath
(String): Defaults to webpack output.publicPathtransformContent(content, resource)
(Function): Transform content, should return a content stringtransformUrl(url, resource)
(Function): Transform url, should return a urlminimize
(Boolean): To minimize. Defaults tofalse
- 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
; // ...other target: Targetsenvtarget || "Wechat" module: rules: // ...other, test: /\.wxml$/ use: loader: "file-loader" options: name: `[name].` useRelativePath: true context: loader: 'wxml-loader' options: root: enforceRelativePath: true plugin: // ...other ;
Related
For a complete guild to use webpack
to develop WeiXin App
, please checkout
my wxapp-boilerplate repo.
License
MIT