wxapp webpack plugin

plug-in wxapp-webpack

Plug-in webpack do miniaplicativo WeChat

Por que usar webpack

Muitos desenvolvedores front-end usaram o webpack, e desenvolver projetos JavaScript por meio do webpack pode trazer muitos benefícios.

• Suporta introdução e uso de módulos node_modules por meio de yarn ou npm
• Suporta loaders e plugins ricos e flexíveis
• alias ​​de suporte
• Existem muitos mais...

Por que usar este plugin

• O desenvolvimento do miniprograma WeChat requer vários arquivos de entrada (como app.js , app.json , pages/index/index.js etc. Para usar este plug-in, você só precisa importar app.js e os outros). os arquivos serão importados automaticamente.
• Se vários arquivos de entrada (como pages/index/index.js e pages/logs/logs.js ) importar o mesmo módulo, este plug-in poderá evitar empacotar o mesmo módulo repetidamente.
• Suporta cópia automática tabbar em app.json (v0.17.0 ou superior)

Como usar

Instalar

yarn add -D wxapp-webpack-plugin

Configurar webpack

1. Introduzir { app: './src/app.js' } na entry , onde ./src/app.js é app.js necessário para o desenvolvimento do miniaplicativo WeChat. Observe key deve ser app e value suporta array)

2. Defina o nome do arquivo: '[name].js' na output filename: '[name].js'。 Observe que [name].js aqui ocorre porque webpack irá empacotar e gerar vários arquivos, e os nomes dos arquivos serão gerados de acordo com a regra [name] .

3. Adicionar new WXAppWebpackPlugin() aos plugins

Dicas de uso loader

Para permitir que webpack compile e gere arquivos não .js , vários loaders devem ser adicionados conforme necessário durante a configuração. O autor aqui recomenda usar os seguintes loaders são muito úteis para o desenvolvimento de miniaplicativos WeChat:

• file-loader: usado para gerar arquivos como *.json , *.wxss , *.jpg
• css-loader: permite que webpack compile ou processe arquivos referenciados em *.wxss
• wxml-loader: permite que webpack compile ou processe arquivos referenciados em *.wxml

Os desenvolvedores também podem usar loader como sass-loader de acordo com suas próprias necessidades e hábitos.

Para andaimes de desenvolvimento de projeto completo, consulte wxapp-boilerplate

API

WXAppWebpackPlugin

uso

webpack.config.babel.js

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

Opções

Todas Options são opcionais

• clear (<Boolean>): Limpa o diretório dist ao iniciar webpack . O padrão é true
• commonModuleName (<String>): nome de arquivo js comum. O padrão é common.js
• extensions (<Array<String>>): Nome do sufixo do arquivo de script. O padrão é ['.js']

Targets

O valor de destino do webpack atualmente inclui Targets.Wechat e Targets.Alipay . Se não for configurado, o destino do webpack será automaticamente definido como Targets.Wechat . Se você precisar desenvolver um miniaplicativo Alipay, altere-o para Targets.Alipay . Os desenvolvedores também podem gerar saída dinamicamente por meio de configurações como process.env.TARGET .

Exemplo

webpack.config.babel.js

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

dica

• O método de desenvolvimento do programa é o mesmo do documento de desenvolvimento do miniaplicativo WeChat. Os desenvolvedores precisam criar arquivos como app.js , app.json , app.wxss , pages/index/index.js no diretório src (fonte) para desenvolvimento.

Licença

MIT © Cap32