Cap32 / Wxapp Webpack Plugin
Licence: mit
📦 微信小程序 webpack 插件
Stars: ✭ 185
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Wxapp Webpack Plugin
Wxapp Boilerplate
使用 webpack, babel, scss 开发的微信/支付宝小程序项目脚手架
Stars: ✭ 367 (+98.38%)
Mutual labels: wechat-mini-program, webpack, alipay, mini-program, wechat, weapp, wxapp
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (+523.24%)
Mutual labels: wechat-mini-program, wechat, weixin, weapp, wxapp
Mina Webpack
🍱 Mina single-file-component meets Webpack
Stars: ✭ 77 (-58.38%)
Mutual labels: wechat-mini-program, webpack, wechat, weixin
Wechat Weapp Movie
🎬电影推荐 - 微信小程序
Stars: ✭ 1,355 (+632.43%)
Mutual labels: wechat, weixin, weapp, wxapp
wxbizdatacrypt
微信小程序加密数据解密算法Go版
Stars: ✭ 132 (-28.65%)
Mutual labels: weixin, weapp, wxapp, wechat-mini-program
Weapp Demo Breadtrip
基于面包旅行 API 制作的微信小程序示例
Stars: ✭ 282 (+52.43%)
Mutual labels: mini-program, wechat, weixin, weapp
Taro scaffold
基于 Taro / dva / redux-saga / react 的微信小程序脚手架,同时集成了 sprite 。
Stars: ✭ 24 (-87.03%)
Mutual labels: wechat-mini-program, wechat, weixin, wxapp
Wux Weapp
🐶 一套组件化、可复用、易扩展的微信小程序 UI 组件库
Stars: ✭ 4,706 (+2443.78%)
Mutual labels: mini-program, weixin, weapp, wxapp
Okam
Mini program development framework
Stars: ✭ 399 (+115.68%)
Mutual labels: alipay, wechat, weapp, wxapp
Weixin Java Miniapp Demo
基于Spring Boot 和 WxJava 实现的微信小程序Java后端Demo
Stars: ✭ 779 (+321.08%)
Mutual labels: wechat-mini-program, wechat, weixin, wxapp
Taro
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
Stars: ✭ 30,230 (+16240.54%)
Mutual labels: wechat-mini-program, wechat, weixin, wxapp
Agora Miniapp Tutorial
Hello world for Agora SDK running in https://en.wikipedia.org/wiki/WeChat#WeChat_Mini_Program
Stars: ✭ 75 (-59.46%)
Mutual labels: wechat-mini-program, wechat, weixin
Weapp Qrcode
weapp.qrcode.js 在 微信小程序 中,快速生成二维码
Stars: ✭ 1,194 (+545.41%)
Mutual labels: wechat-mini-program, wechat, weapp
Taro Msparis
🌱用 React 编写的基于Taro + Dva构建的适配不同端(微信/百度/支付宝小程序、H5、React-Native 等)的时装衣橱
Stars: ✭ 1,203 (+550.27%)
Mutual labels: wechat-mini-program, wechat, wxapp
Rageframe2
一个基于Yii2高级框架的快速开发应用引擎
Stars: ✭ 1,553 (+739.46%)
Mutual labels: wechat-mini-program, alipay, wechat
Miniprogram Project
微信小程序,诗词大全,成语大全,百家姓,成语接龙(垃圾分类查询小程序)
Stars: ✭ 114 (-38.38%)
Mutual labels: wechat-mini-program, mini-program, wechat
Weapp Qrcode Base64
微信小程序生成二维码的插件,基于base64编码输出二维码,不依赖canvas
Stars: ✭ 100 (-45.95%)
Mutual labels: wechat, weapp, wxapp
Wx Miniprogram Boilerplate
基于Gulp微信小程序开发工作流,支持less样式编写,支持ESLint代码检查等功能
Stars: ✭ 122 (-34.05%)
Mutual labels: wechat, weixin, wxapp
wxapp-webpack-plugin
微信小程序 webpack 插件
为什么要使用 webpack
很多前端开发者都使用过 webpack,通过 webpack 开发 JavaScript 项目可以带来很多好处
- 支持通过
yarn
或npm
引入和使用node_modules
模块 - 支持丰富且灵活的
loaders
和plugins
- 支持
alias
- 还有很多...
为什么要使用这个插件
- 微信小程序开发需要有多个入口文件(如
app.js
,app.json
,pages/index/index.js
等等),使用这个插件只需要引入app.js
即可,其余文件将会被自动引入 - 若多个入口文件(如
pages/index/index.js
和pages/logs/logs.js
)引入有相同的模块,这个插件能避免重复打包相同模块 - 支持自动复制
app.json
上的tabbar
图片 (v0.17.0 或以上)
使用方法
安装
yarn add -D wxapp-webpack-plugin
配置 webpack
-
在
entry
上引入{ app: './src/app.js' }
, 这里的./src/app.js
为微信小程序开发所需的app.js
。注意key
必须为app
,value
支持数组) -
在
output
上设置filename: '[name].js'。
注意 这里[name].js
是因为webpack
将会打包生成多个文件,文件名称将以[name]
规则来输出 -
添加
new WXAppWebpackPlugin()
到plugins
loader
的使用提示
为了使 webpack
能编译和输出非 .js
文件,配置时要按需添加各种 loaders
。这里作者推荐使用以下几个对微信小程序开发很有用的 loaders
:
-
file-loader: 用于输出
*.json
,*.wxss
,*.jpg
之类的文件 -
css-loader: 使
webpack
能编译或处理*.wxss
上引用的文件 -
wxml-loader: 使
webpack
能编译或处理*.wxml
上引用的文件
开发者也可以根据自身需求和习惯,使用 sass-loader
之类的 loader
。
完整的项目开发脚手架,请查看 wxapp-boilerplate
API
WXAppWebpackPlugin
用法
webpack.config.babel.js
import WXAppWebpackPlugin from 'wxapp-webpack-plugin';
export default {
// ...configs,
plugins: [
// ...other,
new WXAppWebpackPlugin(options)
],
};
Options
所有 Options
均为可选
-
clear
(<Boolean>): 在启动webpack
时清空dist
目录。默认为true
-
commonModuleName
(<String>): 公共js
文件名。默认为common.js
-
extensions
(<Array<String>>): 脚本文件后缀名。默认为['.js']
Targets
Webpack target 值,目前有 Targets.Wechat
和 Targets.Alipay
,如果不配置,webpack target 将会自动设为 Targets.Wechat
。如果需要开发支付宝小程序,则改为 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
之类的文件进行开发
License
MIT © Cap32
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].