微信小程序 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-
在
entry上引入{ app: './src/app.js' }, 这里的./src/app.js为微信小程序开发所需的app.js。注意key必须为app，value支持数组） -
在
output上设置filename: '[name].js'。注意 这里[name].js是因为webpack将会打包生成多个文件，文件名称将以[name]规则来输出 -
添加
new WXAppWebpackPlugin()到plugins
为了使 webpack 能编译和输出非 .js 文件，配置时要按需添加各种 loaders。这里作者推荐使用以下几个对微信小程序开发很有用的 loaders：
- file-loader: 用于输出
*.json，*.wxss，*.jpg之类的文件 - css-loader: 使
webpack能编译或处理*.wxss上引用的文件 - wxml-loader: 使
webpack能编译或处理*.wxml上引用的文件
开发者也可以根据自身需求和习惯，使用 sass-loader 之类的 loader。
完整的项目开发脚手架，请查看 wxapp-boilerplate
webpack.config.babel.js
import WXAppWebpackPlugin from 'wxapp-webpack-plugin';
export default {
// ...configs,
plugins: [
// ...other,
new WXAppWebpackPlugin(options)
],
};所有 Options 均为可选
clear(<Boolean>): 在启动webpack时清空dist目录。默认为truecommonModuleName(<String>): 公共js文件名。默认为common.jsextensions(<Array<String>>): 脚本文件后缀名。默认为['.js']
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之类的文件进行开发
MIT © Cap32
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent