webpack里使用jquery.mCustomScrollbar插件的方法


Posted in jQuery onMay 30, 2018

malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件

网站: http://manos.malihu.gr/jquery-custom-content-scroller/

github: https://github.com/malihu/malihu-custom-scrollbar-plugin

jquery.mCustomScrollbar在npm上写了在webpack里使用的方法

但是其只说啦引用js,还需要配合mCustomScrollbar的css才能正常使用。

如果直接将下载下来的mCustomScrollbar解压,然后在js里require的话,你会发现使用webpack打包总是报错,

webpack里使用jquery.mCustomScrollbar插件的方法

遇到这样的报错时,说明你使用了mCustomScrollbar在npm上写的引入方法,并且没有更改下载下来的文件夹名。

只需要将jquery.mCustomScrollbar.css所在文件夹的名字修改来不含有 malihu-custom-scrollbar-plugin 即可,比如直接将这个css放在你自己的css文件夹里~~~。

因为在config里配置了匹配到 malihu-custom-scrollbar-plugin 就是用imports-loader在加载,所以导致引入的这个css没有使用css-loader去加载并报错。

在该插件的css里使用了背景图,webpack在打包时,除了js其他的所有类型都需要添加加载器loader,webpack 中引入图片需要依赖 url-loader 这个加载器,

打包时遇到引用图片报错:

webpack里使用jquery.mCustomScrollbar插件的方法

1、安装URL-loader 加载器

npm install url-loader --save-dev

2、配置webpack的config.js 文件

module: {
  loaders: [
   {
    test: /\.css$/, 
    loader: 'style-loader!css-loader'
   },
   { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'},
   //{ test: /\.png$/, loader: "file-loader?name=images/[hash:8].[name].[ext]" }
  ],

 }

所有都配置完,就可以完美的使用webpack引用jquery.mCustomScrollbar插件啦~~~

以上是第一次使用webpack以及第一次在webpack里使用插件的经历,对其理解还不够深入~~~

jQuery 相关文章推荐
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
You might like
杏林同学录(九)
2006/10/09 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
Symfony控制层深入详解
2016/03/17 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Python break语句详解
2014/03/11 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
装修公司管理制度
2015/08/05 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python