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

2024-12-08 10:14:31

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打包总是报错，

遇到这样的报错时，说明你使用了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 这个加载器，

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

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里使用插件的经历，对其理解还不够深入~~~

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

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,还需要配合mCustomScr
jQuery定义插件的方法

有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: /* $.ex
jQuery validata插件实现方法

大家好,第一次写有点正规的博客,以前都是随手复制几下.为了打LOL,我写快点,代码我都复制在最下面了,并且写了大量的注释. 首先我写jquery插件,喜欢这么写(好处有很多,以后在讲,哈哈,看过jQuery源码应该知道): (function(root,factory,plug,undefined){ factory(root.jQuery,plug) })(window,function($,plug){ /* 在这里写逻辑一:默认的参数 var __dEFAULTS__, 二:规则(可根据
制作高质量的JQuery Plugin 插件的方法

JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines好了,下面有一些我觉得想做一个好的插件必须应有的要求: 1.在JQuery命名空间下声明只声明一个单独的名称 2.接受options参数,以便控制插件的行为 3.暴露插件的默认设置 ,以便外面可以访问 4.适当地将子函数提供给外部访问调用 5.保持私有函数 6.支持元数据插件下面将逐条地过一遍: 只声明一个单独的名称这表明是一个单独
jQuery dateRangePicker插件使用方法详解

jQuery dateRangePicker插件使用总结. 版本说明: 当前使用版本:2.1.25 特别说明:版本不同,部分api可能会发生变化,需要引起重点关注效果图关键代码片段 $("#dateTimeRange span").html(moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + moment().format('YYYY-MM-DD HH:mm')); $("#dateTimeRa
如何在Angular2中使用jQuery及其插件的方法

jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考这篇文章:http://www.jb51.net/ar
jquery简单插件制作(fn.extend)完整实例

本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu
jQuery Masonry瀑布流插件使用方法详解

用jQuery Masonry 插件创建瀑布流式的页面我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法. 1.分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="http://jq22.qiniud
jQuery创建自己的插件(自定义插件)的方法

但必须知道,这些插件不是自己凭空产生的,它们是由开发人员编写.测试并完善的,这些人员为 jQuery 社区奉献了自己的业余时间.我们做这些都是免费的,是出于对自己代码的热爱.本文主要关注您如何回报这个伟大的社区,即如何编写自己的插件并上传到 jQuery 的插件页面.这可以让所有人使用您创建的插件,可以让整个 jQuery 开发社区变得更好.今年您也做出自己的贡献吧. 在编写本文中的插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了.困难的地方在于想一些其他人还没有做过的事情,并编写一
jQuery分页插件jquery.pagination.js使用方法解析

jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢: jQuery的多数插件使用都比较简单,都能查找出相关api,且含有demo: 使用此插件,首先在页面(jsp.html)中引入其js.css文件 <link href="/自定义路劲/jquery.pagination/pagination.css" rel=&q

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

相关推荐

随机推荐