为什么要使用 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. module.exports = {
  4. // 引入 `app.js`
  5. entry: './src/app.js',
  6. output: {
  7. filename: 'bundle.js',
  8. // 此处 `dist` 为微信开发者工具引入的开发目录
  9. path: path.resolve(__dirname, 'dist'),
  10. },
  11. plugins: [
  12. // 引入插件
  13. new WXAppWebpackPlugin(),
  14. ],
  15. module: {
  16. rules: [], // 各种 loaders 在这里添加
  17. },
  18. resolve: {
  19. modules: ['src', 'node_modules'],
  20. extensions: ['.js'],
  21. },
  22. };

小程序” 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