webpack

var path = require('path') // 安装完webpack自带的

--dirname代表webpack.config.js文件当前所在的路径

webpack只支持原生js模块的打包,若是要打包html、css、es6语法写的代码转换为es5,则需要使用loaders

模块文件名a.js:

 function toast(msg,time) {
            this.msg = msg;
            this.dismissTime = time||3000;
            this.createToast();
            this.showToast();
        }
     toast.prototype = {
            createToast: function() {
                var tpl = '<div class="toast">'+this.msg+'</div>';
                this.$toast = $(tpl);
                $('body').append(this.$toast);
            },
            showToast: function() {
                var self = this;
                this.$toast.fadeIn(3000,function() {
                    setTimeout(function() {
                        self.$toast.fadeOut(3000,function() {
                            self.$toast.remove();
                        });
                    },self.dismissTime);
                });
            }
        };

        function Toast(msg,time) {
            return new toast(msg,time);
        }
// 因为module.exports等于一个对象,而现在返回的是一个函数,所以要写成如下形式
module.exports.Toast = Toast 

模块文件名b.js

// 加载a.js模块

var Toast = require('a.js').Toast; // 这么写 ,require('a.js')是对象,加载它的Toast方法

webpack -w // 观察模式,对js代码改动会自动重新打包

webpack -p // 压缩打包js代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AMD、CMD、RequireJS

    小胖
  • React思考题

    小胖
  • 什么是Sass

    小胖
  • 带你玩转小程序开发实践|含直播回顾视频

    作者:张利涛 本文原创,转载请注明作者及出处 小程序和 H5 区别 小程序的运行过程 解决小程序接口不支持 Promise 的问题 小程序组件化开发及通信 ...

    iKcamp
  • 解决 vue Element ui tree 不能单选的问题

    this.selectOrg.orgsid 是一个中间数据,进行判断,所以没有使用默认选择的那个数组

    前端博客 : alili.tech
  • 每天一道leetcode905-按奇偶排序数组

    2018.11.12号打卡 明天的题目: https://leetcode.com/problems/merge-intervals/

    乔戈里
  • ESP8266 SDK开发: 外设篇-SPI

    杨奉武
  • LeetCode - 按奇偶排序数组②

    这题是LeetCode第N次周赛的题目,题号是922,难度是Easy,当时处于疯狂刷通过率高的题目,然后提高自己的信心的地步...看提交记录,应该是一个月三周前...

    晓痴
  • 最小差

    一份执着✘
  • <embed>标签

    Html5知典

扫码关注云+社区

领取腾讯云代金券