wxml loader 다운로드 - wxml loader 소스 코드 다운로드

wxml loader

AI 소스 코드

Add webpack 4 support

다운로드

wxml-로더

웹팩용 wxml 로더

이 wxml은 Wechat 미니 프로그램용 마크업 언어입니다.

설치

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 (String): 소스를 요구하는 루트 경로
enforceRelativePath (부울): 각 파일에 대한 root 상대 URL을 생성하려면 true여야 합니다. true 로 설정하는 것이 좋습니다.
publicPath (문자열): 기본값은 webpack 출력입니다.publicPath
transformContent(content, resource) (함수): 콘텐츠를 변환하고 콘텐츠 문자열을 반환해야 합니다.
transformUrl(url, resource) (함수): URL 변환, URL을 반환해야 함
minimize (부울): 최소화합니다. 기본값은 false
모든 html-minifier 옵션이 지원됩니다.

알려진 문제

현재 wxml-loader 동적 경로(예: <image src="./images/{{icon}}.png" /> 를 확인할 수 없습니다. 해당 리소스를 dist 디렉터리에 수동으로 복사하려면 copy-webapck-plugin 사용하세요. 자세한 내용은 #1을 참조하세요(중국어).

Alipay 미니 프로그램의 경우

이 로더는 Alipay 미니 프로그램과도 호환됩니다. webpack 구성에서 test: /.axml$/ 대신 test: /.wxml$/ 사용해야 합니다.

wxapp-webpack-plugin을 사용하고 Targets.Alipay webpack 대상으로 설정하는 경우 기본적으로 자동으로 transformContent() 및 transformUrl() 옵션이 설정되고, transformContent() 함수는 wx:attr 속성을 a:attr 로 변환합니다. transformUrl() 함수는 .wxml 확장자를 .axml 로 자동 변환합니다. 즉, 미니 프로그램을 한 번 작성하고 Wechat과 Alipay 미니 프로그램을 모두 구축할 수 있다는 의미입니다.

예

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