先要npm下来zepto:npm install zepto

然后npm下来exports-loader和script-loader

配置如下:

JavaScript

// webpack.config
{
// ...
module: {
loaders: [{
test: require.resolve('zepto'),
loader: 'exports-loader?window.Zepto!script-loader'
}]
}
}

这样我们在页面入口文件中就可以这么写:

JavaScript

// entry.js
import $ from 'zepto' $(function () {
// ...
})
引入成功后,会解决"$ is not defined"的问题
------------------------------------分割线-----------------------------------------
但是tap事件是触发不了的,因为zepto没有继承touch.js,在node_moudules文件夹中看npm下来的zepto,在src文件夹下游touch.js文件,正是我们需要的,现在就想办法把这个js引入就可以了。
想法有两个:
  1,重新打包zepto.js,将touch.js打包到zepto.js中,这是我的思路,但是我并不知道怎么来实现,于是想了个办法,吧touch.js文件中的代码拷贝到/dist/zepto.js的代码的最后,即可。
  2,将touch.js引入到entry.js,require('../node_modules/zepto/src/touch.js'),这句代码要写在引入zepto的下面,即可。

webpack学习笔记——项目引入zepto及tap事件失效的解决的更多相关文章

  1. zepto之tap事件点透问题分析及解决方案

    点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...

  2. zepto的tap事件的穿透分析

    首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取 ...

  3. muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制

    目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...

  4. Python3+Selenium3+webdriver学习笔记14(等待判断 鼠标事件 )

    !/usr/bin/env python -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记14(等待判断 鼠标事件 )'''from selenium im ...

  5. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  6. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  7. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  8. webpack学习笔记

    1.安装webpack npm install webpack -g 2.进入项目目录,初始化 npm init 3.将webpack安装到项目依赖中 npm install webpack --sa ...

  9. Webpack学习笔记(一)

    转载http://zhaoda.net/webpack-handbook/module-system.html 转载http://www.cnblogs.com/vajoy/p/4650467.htm ...

随机推荐

  1. Java 8 新特性:6-Optional类

    (原) 先看看上面的说明: /** * A container object which may or may not contain a non-null value. * If a value i ...

  2. CCPC-Wannafly Winter Camp Day1部分题目解析

    Preface 最近恰好不知道做什么题,所以就按老叶要求做上面的比赛. 稍微看了下感觉难度适中,大部分题目偏向联赛难度,当然也有些题目打到了省选题的感觉(基本都是Div1的题) 这里就简单拿一些我做得 ...

  3. .Net Core应用框架Util介绍(六)

    前面介绍了Util是如何封装以降低Angular应用的开发成本. 现在把关注点移到服务端,本文将介绍分层架构各构造块及基类,并对不同层次的开发人员应如何进行业务开发提供一些建议. Util分层架构介绍 ...

  4. java高级-动态注入替换类Instrumentation

    介绍 利用java.lang.instrument(容器类) 做动态 Instrumentation(执行容器) 是 Java SE 5 的新特性. 使用 Instrumentation,开发者可以构 ...

  5. Spring 使用纯注解方式完成IoC

    目录 创建一个简单的Person类 使用xml方式配置Spring容器并获取bean的过程 创建xml配置文件 进行测试 使用纯注解方式配置Spring容器并获取bean的过程 创建spring配置类 ...

  6. css3 animation(左右摆动) (放大缩小)

    左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...

  7. 微信小程序手机预览请求不到数据(最后一条不明所以)

    本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...

  8. adoop(四)HDFS集群详解

    阅读目录(Content) 一.HDFS概述 1.1.HDFS概述 1.2.HDFS的概念和特性 1.3.HDFS的局限性 1.4.HDFS保证可靠性的措施 二.HDFS基本概念 2.1.HDFS主从 ...

  9. Shell命令-系统信息及显示之dmesg、uptime

    文件及内容处理 - dmesg.uptime 1. dmesg:显示开机信息 dmesg命令的功能说明 dmesg 命令用于显示开机信息.kernel 会将开机信息存储在 ring buffer 中. ...

  10. DAY16、模块和包

    一.模块 1.模块的加载顺序:内存 =>内置 =>sys.path(一系列自定义模块) 2.sys.path:环境变量,存放文件路径的列表 重点:默认列表第一个元素就是当前被执行文件所在的 ...