wxapp webpack plugin

wxapp-webpack-plugin

WeChat-Applet-Webpack-Plug-in

Warum Webpack verwenden?

Viele Front-End-Entwickler haben Webpack verwendet, und die Entwicklung von JavaScript-Projekten über Webpack kann viele Vorteile bringen.

• Unterstützt die Einführung und Verwendung node_modules -Modulen über yarn oder npm
• Unterstützt umfangreiche und flexible loaders und plugins
• Support alias
• Es gibt noch viele mehr...

Warum dieses Plugin verwenden?

• Für die Entwicklung des WeChat-Miniprogramms sind mehrere Eingabedateien erforderlich (z. B. app.js , app.json , pages/index/index.js usw.). Um dieses Plug-in zu verwenden, müssen Sie nur app.js und andere importieren Dateien werden automatisch importiert.
• Wenn mehrere Eintragsdateien (z. B. pages/index/index.js und pages/logs/logs.js ) dasselbe Modul importieren, kann dieses Plug-in das wiederholte Packen desselben Moduls vermeiden.
• Unterstützt das automatische Kopieren tabbar -Bildern in app.json (v0.17.0 oder höher)

Wie zu verwenden

Installieren

yarn add -D wxapp-webpack-plugin

Webpack konfigurieren

1. Geben Sie { app: './src/app.js' } im entry ein, wobei ./src/app.js app.js ist, die für die WeChat-Applet-Entwicklung erforderlich ist. Beachten Sie, key app sein muss und value Array unterstützt.

2. Legen Sie den Dateinamen „[name].js“ für output fest filename: '[name].js'。 Beachten Sie , dass [name].js hier darauf zurückzuführen ist, dass webpack mehrere Dateien packt und generiert und die Dateinamen gemäß der [name] -Regel ausgegeben werden.

3. new WXAppWebpackPlugin() zu plugins hinzufügen

Tipps zur Verwendung loader

Damit webpack Nicht .js Dateien kompilieren und ausgeben kann, müssen bei der Konfiguration nach Bedarf verschiedene loaders hinzugefügt werden. Der Autor empfiehlt hier die Verwendung der folgenden loaders für die WeChat-Applet-Entwicklung sehr nützlich sind:

• Dateilader: Wird zum Ausgeben von Dateien wie *.json , *.wxss , *.jpg verwendet
• CSS-Loader: Ermöglicht webpack das Kompilieren oder Verarbeiten von Dateien, auf die in *.wxss verwiesen wird
• wxml-loader: Ermöglicht webpack das Kompilieren oder Verarbeiten von Dateien, auf die in *.wxml verwiesen wird

Entwickler können auch loader wie sass-loader entsprechend ihren eigenen Bedürfnissen und Gewohnheiten verwenden.

Für vollständige Projektentwicklungsgerüste sehen Sie sich bitte wxapp-boilerplate an

API

WXAppWebpackPlugin

Verwendung

webpack.config.babel.js

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

Optionen

Alle Options sind optional

• clear (<Boolean>): Löschen Sie das dist -Verzeichnis beim Starten webpack . Der Standardwert ist true
• commonModuleName (<String>): Allgemeiner js Dateiname. Der Standardwert ist common.js
• extensions (<Array<String>>): Suffixname der Skriptdatei. Standard ist ['.js']

Targets

Der Webpack-Zielwert umfasst derzeit Targets.Wechat und Targets.Alipay . Wenn nicht konfiguriert, wird das Webpack-Ziel automatisch auf Targets.Wechat gesetzt. Wenn Sie ein Alipay-Applet entwickeln müssen, ändern Sie es in Targets.Alipay . Entwickler können die Ausgabe auch dynamisch über Konfigurationen wie process.env.TARGET durchführen.

Beispiel

webpack.config.babel.js

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

Hinweis

• Die Programmentwicklungsmethode ist die gleiche wie beim WeChat-Applet-Entwicklungsdokument. Entwickler müssen für die Entwicklung Dateien wie app.js , app.json , app.wxss und pages/index/index.js im src -Verzeichnis (Quelle) erstellen.

Lizenz

MIT © Cap32