wxapp webpack plugin

complemento-wxapp-webpack

Complemento del paquete web del subprograma WeChat

¿Por qué utilizar el paquete web?

Muchos desarrolladores front-end han utilizado webpack y desarrollar proyectos de JavaScript a través de webpack puede traer muchos beneficios.

• Admite la introducción y el uso de módulos node_modules a través de yarn o npm
• Admite loaders y plugins ricos y flexibles
• alias ​​de soporte
• Hay muchos más...

¿Por qué utilizar este complemento?

• El desarrollo del miniprograma WeChat requiere varios archivos de entrada (como app.js , app.json , pages/index/index.js etc. Para usar este complemento, solo necesita importar app.js y el otro). Los archivos se importarán automáticamente.
• Si varios archivos de entrada (como pages/index/index.js y pages/logs/logs.js ) importan el mismo módulo, este complemento puede evitar empaquetar el mismo módulo repetidamente.
• Admite la copia automática tabbar en app.json (v0.17.0 o superior)

como usar

Instalar

yarn add -D wxapp-webpack-plugin

Configurar paquete web

1. Introduzca { app: './src/app.js' } en entry , donde ./src/app.js es app.js necesario para el desarrollo del subprograma WeChat. Tenga en cuenta key debe ser app y value admite una matriz)

2. Establezca el nombre de archivo: '[nombre].js' en output filename: '[name].js'。 Tenga en cuenta que [name].js aquí se debe a que webpack empaquetará y generará varios archivos, y los nombres de los archivos se generarán de acuerdo con la regla [name] .

3. Agregue new WXAppWebpackPlugin() a plugins

Consejos de uso loader

Para permitir que webpack compile y genere archivos que no sean .js , se deben agregar varios loaders según sea necesario durante la configuración. El autor aquí recomienda utilizar los siguientes loaders son muy útiles para el desarrollo de subprogramas WeChat:

• cargador de archivos: utilizado para generar archivos como *.json , *.wxss , *.jpg
• css-loader: permite que webpack compile o procese archivos a los que se hace referencia en *.wxss
• wxml-loader: permite que webpack compile o procese archivos a los que se hace referencia en *.wxml

Los desarrolladores también pueden utilizar loader como sass-loader según sus propias necesidades y hábitos.

Para conocer el andamiaje completo del desarrollo del proyecto, consulte wxapp-boilerplate

API

Complemento WXAppWebpack

uso

webpack.config.babel.js

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

Opciones

Todas Options son opcionales

• clear (<Boolean>): borra el directorio dist al iniciar webpack . El valor predeterminado es true
• commonModuleName (<String>): nombre de archivo js común. El valor predeterminado es common.js
• extensions (<Array<String>>): nombre del sufijo del archivo de script. El valor predeterminado es ['.js']

Targets

El valor objetivo del paquete web actualmente incluye Targets.Wechat y Targets.Alipay . Si no se configura, el objetivo del paquete web se establecerá automáticamente en Targets.Wechat . Si necesita desarrollar un subprograma de Alipay, cámbielo a Targets.Alipay . Los desarrolladores también pueden generar resultados dinámicamente a través de configuraciones como process.env.TARGET .

Ejemplo

webpack.config.babel.js

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

pista

• El método de desarrollo del programa es el mismo que el del documento de desarrollo del subprograma WeChat. Los desarrolladores deben crear archivos como app.js , app.json , app.wxss , pages/index/index.js en src (fuente) para el desarrollo.

Licencia

© Cap32