wxml loader for webpack
Please note this wxml is a markup language for Wechat mini programs
npm install wxml-miniapp-loader --save-dev
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-miniapp-loader',
options: {
root: resolve('src'),
enforceRelativePath: true,
},
},
],
}
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
This loader is also compatible with
Baidu smart programs. You
just need to make sure using test: /\.wxml$/
in
webpack config.
If you're using
mini-application-webpack-plugin and
setting Targets.Swan
as webpack target, it will automatically transform .wxml
to .swan
. That means you could write mini programs once, and build both
Wechat and Baidu mini programs.
webpack.config.babel.js
import MiniApplicationWebpackPlugin from 'mini-application-webpack-plugin';
export default env => ({
// ...other
target: Targets[env.target || "Wx"],
module: {
rules: [
// ...other,
{
test: /\.wxml$/,
use: [
{
loader: "file-loader",
options: {
name: `[name].${env.target === "Swan" ? "swan" : "wxml"}`
useRelativePath: true,
context: resolve('src'),
},
},
{
loader: 'wxml-miniapp-loader',
options: {
root: resolve('src'),
enforceRelativePath: true,
},
},
]
}
]
},
plugin: [
// ...other
new MiniApplicationWebpackPlugin()
]
});
MIT