Unduhan wxml loader - pengunduhan kode sumber wxml loader

wxml loader

Kode Sumber AI

Add webpack 4 support

Unduh

wxml-loader

pemuat wxml untuk webpack

Harap dicatat wxml ini adalah bahasa markup untuk program mini WeChat

Instalasi

yarn add -D wxml-loader

Penggunaan

Anda mungkin juga perlu menggunakan file-loader untuk mengekstrak file.

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

Pilihan

root (String): Jalur root untuk sumber yang dibutuhkan
enforceRelativePath (Boolean): Harus benar jika Anda ingin membuat URL relatif root untuk setiap file. Disarankan untuk menyetel ke true
publicPath (String): Defaultnya adalah output webpack.publicPath
transformContent(content, resource) (Fungsi): Mengubah konten, harus mengembalikan string konten
transformUrl(url, resource) (Fungsi): Ubah url, harus mengembalikan url
minimize (Boolean): Untuk meminimalkan. Defaultnya false
Semua opsi minifier html didukung

Masalah yang Diketahui

Saat ini wxml-loader tidak dapat menyelesaikan jalur dinamis, yaitu <image src="./images/{{icon}}.png" /> . Silakan gunakan copy-webapck-plugin untuk menyalin sumber daya tersebut ke direktori dist secara manual. Lihat #1 untuk detailnya (Cina).

Untuk program mini Alipay

Loader ini juga kompatibel dengan program mini Alipay. Anda hanya perlu memastikan menggunakan test: /.axml$/ alih-alih test: /.wxml$/ di konfigurasi webpack.

Jika Anda menggunakan wxapp-webpack-plugin dan menetapkan Targets.Alipay sebagai target webpack, maka secara otomatis akan menyetel opsi transformContent() dan transformUrl() secara default, fungsi transformContent() akan mengubah atribut wx:attr menjadi a:attr , dan fungsi transformUrl() akan mengubah ekstensi .wxml menjadi .axml secara otomatis. Itu berarti Anda dapat menulis program mini satu kali, dan membuat program mini WeChat dan Alipay.

Contoh

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