wxapp webpack plugin

wxapp-웹팩-플러그인

WeChat 애플릿 웹팩 플러그인

웹팩을 사용하는 이유

많은 프론트엔드 개발자들이 webpack을 사용해왔고, webpack을 통해 JavaScript 프로젝트를 개발하면 많은 이점을 얻을 수 있습니다.

• yarn 또는 npm 통해 node_modules 모듈 도입 및 사용 지원
• 풍부하고 유연한 loaders 및 plugins 지원
• 지원 alias
• 더 많은 것이 있습니다...

이 플러그인을 사용하는 이유

• WeChat 미니 프로그램 개발에는 여러 항목 파일(예: app.js , app.json , pages/index/index.js 등)이 필요합니다. 이 플러그인을 사용하려면 app.js 만 가져오면 됩니다. 파일을 자동으로 가져옵니다.
• 여러 항목 파일(예: pages/index/index.js 및 pages/logs/logs.js )이 동일한 모듈을 가져오는 경우 이 플러그인은 동일한 모듈을 반복적으로 패키징하는 것을 방지할 수 있습니다.
• app.json (v0.17.0 이상)에서 tabbar 이미지 자동 복사 지원

사용방법

설치하다

yarn add -D wxapp-webpack-plugin

웹팩 구성

1. entry 에 { app: './src/app.js' } 소개합니다. 여기서 ./src/app.js 는 WeChat 애플릿 개발에 필요한 app.js 입니다. key app 이어야 하며 value 배열을 지원 합니다 .)

2. output 시 파일 이름: '[name].js'를 설정합니다 filename: '[name].js'。 여기서 [name].js 는 webpack 여러 파일을 패키징하고 생성하며, 파일 이름은 [name] 규칙에 따라 출력되기 때문 입니다 .

3. plugins 에 new WXAppWebpackPlugin() 추가

loader 사용 팁

webpack .js 아닌 파일을 컴파일하고 출력할 수 있도록 하려면 구성 중에 필요에 따라 다양한 loaders 추가해야 합니다. 저자는 WeChat 애플릿 개발에 매우 ​​유용한 다음 loaders 사용할 것을 권장합니다.

• file-loader: *.json , *.wxss , *.jpg 등의 파일을 출력하는 데 사용됩니다.
• css-loader: webpack *.wxss 에서 참조되는 파일을 컴파일하거나 처리할 수 있도록 합니다.
• wxml-loader: webpack *.wxml 에서 참조되는 파일을 컴파일하거나 처리할 수 있도록 합니다.

개발자는 자신의 필요와 습관에 따라 sass-loader 와 같은 loader 사용할 수도 있습니다.

전체 프로젝트 개발 스캐폴딩을 보려면 wxapp-boilerplate를 참조하세요.

API

WXAppWebpack플러그인

용법

webpack.config.babel.js

 import WXAppWebpackPlugin from 'wxapp-webpack-plugin' ;
export default {
  // ...configs,
  plugins : [
    // ...other,
    new WXAppWebpackPlugin ( options )
  ] ,
} ; 

옵션

모든 Options 선택 사항입니다.

• clear (<Boolean>): webpack 시작할 때 dist 디렉터리를 지웁니다. 기본값은 true 입니다.
• commonModuleName (<String>): 일반적인 js 파일 이름입니다. 기본값은 common.js 입니다.
• extensions (<Array<String>>): 스크립트 파일 접미사 이름. 기본값은 ['.js'] 입니다.

Targets

Webpack 대상 값에는 현재 Targets.Wechat 및 Targets.Alipay 포함되어 있습니다. 구성되지 않은 경우 webpack 대상은 자동으로 Targets.Wechat 으로 설정됩니다. Alipay 애플릿을 개발해야 하는 경우 이를 Targets.Alipay 로 변경하세요. 개발자는 process.env.TARGET 과 같은 구성을 통해 동적으로 출력할 수도 있습니다.

예

webpack.config.babel.js

 import WXAppWebpackPlugin , { Targets } from 'wxapp-webpack-plugin' ;
export default {
  // ...configs,
  target : Targets [ process . env . TARGET || 'Wechat' ] ,
} ; 

힌트

• 프로그램 개발 방법은 위챗 애플릿 개발문서와 동일하며, 개발자는 개발을 위해 src (소스) 디렉터리에 app.js , app.json , app.wxss , pages/index/index.js 등의 파일을 생성해야 합니다.

특허

MIT © Cap32