wxml loader下载 - wxml loader源码下载

wxml loader

Ai源码

Add webpack 4 support

下载

wxml加载器

webpack 的 wxml 加载器

请注意这个wxml是微信小程序的标记语言

安装

yarn add -D wxml-loader

用法

您可能还需要使用文件加载器来提取文件。

 {
  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 ,
      } ,
    } ,
  ] ,
}

选项

root （字符串）：所需源的根路径
enforceRelativePath （布尔值）：如果您希望为每个文件生成root相对 URL，则应为 true。建议设置为true
publicPath （字符串）：默认为 webpack output.publicPath
transformContent(content, resource) (Function)：转换内容，应返回内容字符串
transformUrl(url, resource) (Function): 转换 url，应该返回一个 url
minimize （布尔值）：最小化。默认为false
支持所有 html-minifier 选项

已知问题

目前wxml-loader无法解析动态路径，即<image src="./images/{{icon}}.png" /> 。请使用copy-webapck-plugin手动将这些资源复制到 dist 目录。详细信息请参见#1（中文）。

对于支付宝小程序

该加载器还兼容支付宝小程序。你只需要确保在 webpack 配置中使用test: /.axml$/而不是test: /.wxml$/ 。

如果您使用 wxapp-webpack-plugin 并将Targets.Alipay设置为 webpack 目标，默认情况下它会自动设置transformContent()和transformUrl()选项， transformContent()函数会将wx:attr属性转换为a:attr ，并且transformUrl()函数会自动将.wxml扩展名转换为.axml 。这意味着您可以编写一次小程序，并同时构建微信和支付宝小程序。

例子

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