webpack-wxml-loader
v1.0.0
Published
wxml loader for webpack
Downloads
8
Maintainers
Readme
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 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
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