wxapp-webpack-plugin v0.19.0
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
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago