小程序模板网

微信小程序 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 目录


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23487.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询