wxapp webpack plugin

wxapp-webpack-plugin

Plug-in du pack Web pour l'applet WeChat

Pourquoi utiliser Webpack

De nombreux développeurs front-end ont utilisé Webpack, et développer des projets JavaScript via Webpack peut apporter de nombreux avantages.

• Prend en charge l'introduction et l'utilisation des modules node_modules via yarn ou npm
• Prise en loaders et plugins riches et flexibles
• alias ​​d'assistance
• Il y en a bien d'autres...

Pourquoi utiliser ce plugin

• Le développement du mini-programme WeChat nécessite plusieurs fichiers d'entrée (tels que app.js , app.json , pages/index/index.js etc. Pour utiliser ce plug-in, il vous suffit d'importer app.js et l'autre). les fichiers seront automatiquement importés.
• Si plusieurs fichiers d'entrée (tels que pages/index/index.js et pages/logs/logs.js ) importent le même module, ce plug-in peut éviter d'empaqueter le même module à plusieurs reprises.
• Prend en charge la copie automatique tabbar dans app.json (v0.17.0 ou supérieure)

Comment utiliser

Installer

yarn add -D wxapp-webpack-plugin

Configurer le pack Web

1. Introduisez { app: './src/app.js' } sur entry , où ./src/app.js est app.js requis pour le développement de l'applet WeChat. Notez key doit être app et que value prend en charge le tableau)

2. Définir le nom du fichier : '[name].js' sur output filename: '[name].js'。 Notez que [name].js ici est dû au fait que webpack regroupera et générera plusieurs fichiers, et les noms de fichiers seront affichés conformément à la règle [name] .

3. Ajouter new WXAppWebpackPlugin() aux plugins

Conseils d'utilisation loader

Afin de permettre webpack de compiler et de générer des fichiers non .js , divers loaders doivent être ajoutés selon les besoins lors de la configuration. L'auteur recommande ici d'utiliser les loaders sont très utiles pour le développement d'applets WeChat :

• file-loader : utilisé pour générer des fichiers tels que *.json , *.wxss , *.jpg
• css-loader : permet webpack de compiler ou de traiter des fichiers référencés sur *.wxss
• wxml-loader : permet webpack de compiler ou de traiter des fichiers référencés sur *.wxml

Les développeurs peuvent également utiliser loader tels que sass-loader selon leurs propres besoins et habitudes.

Pour un échafaudage complet de développement de projet, veuillez consulter wxapp-boilerplate

API

WXAppWebpackPlugin

usage

webpack.config.babel.js

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

Possibilités

Toutes Options sont facultatives

• clear (<Boolean>) : effacez le répertoire dist lors du démarrage webpack . La valeur par défaut est true
• commonModuleName (<String>) : nom de fichier js commun. La valeur par défaut est common.js
• extensions (<Array<String>>) : nom du suffixe du fichier de script. La valeur par défaut est ['.js']

Targets

La valeur cible du Webpack inclut actuellement Targets.Wechat et Targets.Alipay . Si elle n'est pas configurée, la cible du webpack sera automatiquement définie sur Targets.Wechat . Si vous devez développer une applet Alipay, remplacez-la par Targets.Alipay . Les développeurs peuvent également générer une sortie dynamique via des configurations telles que process.env.TARGET .

Exemple

webpack.config.babel.js

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

indice

• La méthode de développement du programme est la même que celle du document de développement de l'applet WeChat. Les développeurs doivent créer des fichiers tels que app.js , app.json , app.wxss , pages/index/index.js dans src (source) pour le développement.

Licence

MIT © Cap32