组件详情
小程序webpack插件

小程序webpack插件

上传者:李泽辰    上传时间:2017-04-06 15:15:49

  488

开发框架

下载   喜欢

小程序webpack插件 介绍

为什么要使用 webpack

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

  • 支持通过 yarnnpm 引入和使用 node_modules 模块
  • 支持丰富且灵活的 loadersplugins
  • 支持 alias
  • 还有很多...

用法

安装

yarn add -D wxapp-webpack-plugin

配置 webpack

  1. entry 上引入 app.js 文件 (支持数组或对象方式
  2. plugins 数组添加 new WXAppWebpackPlugin()
完整 webpack.config.js 示例
const path = require('path');
const WXAppWebpackPlugin = require('wxapp-webpack-plugin');
module.exports = {
    // 引入 `app.js`
    entry: './src/app.js',
    output: {
        filename: 'bundle.js',
        // 此处 `dist` 为微信开发者工具引入的开发目录
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        // 引入插件
        new WXAppWebpackPlugin(),
    ],
    module: {
        rules: [], // 各种 loaders 在这里添加
    },
    resolve: {
        modules: ['src', 'node_modules'],
        extensions: ['.js'],
    },
};

开始开发小程序

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

注意

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

License

MIT © Cap32

精品推荐
最新发布

联系我们

电话:400 866 0210 (工作日 9:00 ~ 18:00)

QQ群:385046190

客服:service@pgyer.com

商务:bd@pgyer.com

版权所有 © 西安点测网络科技有限公司 2014 - 2017 陕ICP备15010407号-4