分享到：微信新浪微博QQ好友QQ空间腾讯微博复制网址

为什么要使用 webpack

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

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

用法

安装

    
	
  1. yarn add -D wxapp-webpack-plugin
    2.

配置 webpack

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

完整 webpack.config.js 示例

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

小程序” style=”margin: 20px 0px; font-family: ‘PingFang SC’, ‘Hiragino Sans GB’, ‘Helvetica Neue’, ‘Microsoft Yahei’, ‘WenQuanYi Micro Hei’, sans-serif; font-weight: 500; line-height: 40px; color: rgb(44, 62, 80); text-rendering: optimizeLegibility; font-size: 21px; background-color: rgb(249, 249, 245);”>开始开发小程序

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

阿里云-推广AD

注意

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

github地址（或许是这个地址吧）：https://github.com/Cap32/wxapp-webpack-plugin