微信小程序 webpack 插件

为什么要使用 webpack

很多前端开发者都使用过 webpack，通过 webpack 开发 JavaScript 项目可以带来很多好处

• 支持通过 yarn 或 npm 引入和使用 node_modules 模块
• 支持丰富且灵活的 loaders 和 plugins
• 支持 alias
• 还有很多...

用法

安装

1. yarn add -D wxapp-webpack-plugin

配置 webpack

• 在 entry 上引入 app.js 文件 （支持数组或对象方式）
• 在 plugins 数组添加 new WXAppWebpackPlugin()

完整 webpack.config.js 示例

1. const path = require('path');
2. const WXAppWebpackPlugin = require('wxapp-webpack-plugin');
3.  
4. module.exports = {
5.  
6. // 引入 `app.js`
7. entry: './src/app.js',
8.  
9. output: {
10. filename: 'bundle.js',
11.  
12. // 此处 `dist` 为微信开发者工具引入的开发目录
13. path: path.resolve(__dirname, 'dist'),
14. },
15. plugins: [
16.  
17. // 引入插件
18. new WXAppWebpackPlugin(),
19.  
20. ],
21. module: {
22. rules: [], // 各种 loaders 在这里添加
23. },
24. resolve: {
25. modules: ['src', 'node_modules'],
26. extensions: ['.js'],
27. },
28. };

现在可以通过在终端输入 webpack -w 开始使用 webpack 开发微信小程序

注意

• 暂时只在 webpack@v2.3.2 - 测试通过，不确定其他版本下是否兼容性，欢迎提交反馈
• 程序的开发方式与 微信小程序开发文档 一样，开发者需要在 src （源）目录创建 app.js、app.json、app.wxss、pages/index/index.js 之类的文件进行开发
• 默认下，src 目录下的所有非 .js 文件（例如 app.json, pages/index/index.wxml 等等），会被自动复制到 dist 目录