@jimexist/mini-program-xml-loader
v0.3.4
Published
mini-program xml loader for webpack 4
Downloads
7
Maintainers
Readme
@jimexist/mini-program-xml-loader
wxml loader for webpack
Please note this wxml is a markup language for Wechat mini programs
Difference from original package
The branch you are currently browsing is forked from Cap32/wxml-loader, but has built-in Safe-path logic compatible with mina-webpack.
Installation
yarn add -D @jimexist/mini-program-xml-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: '@tinajs/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 webpack from 'webpack';
import WXAppWebpackPlugin from "wxapp-webpack-plugin";
export default env => ({
// ...other
target: (compiler) => compiler.apply(new webpack.LoaderTargetPlugin(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: '@tinajs/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.