webpack里使用jquery.mCustomScrollbar插件的方法
malihu-custom-scrollbar-plugin是一個(gè)依賴jquery的自定義網(wǎng)頁(yè)滾動(dòng)條樣式插件
網(wǎng)站： http://manos.malihu.gr/jquery-custom-content-scroller/
github： https://github.com/malihu/malihu-custom-scrollbar-plugin
jquery.mCustomScrollbar在npm上寫了在webpack里使用的方法
但是其只說(shuō)啦引用js，還需要配合mCustomScrollbar的css才能正常使用。
如果直接將下載下來(lái)的mCustomScrollbar解壓，然后在js里require的話，你會(huì)發(fā)現(xiàn)使用webpack打包總是報(bào)錯(cuò)，
遇到這樣的報(bào)錯(cuò)時(shí)，說(shuō)明你使用了mCustomScrollbar在npm上寫的引入方法，并且沒(méi)有更改下載下來(lái)的文件夾名。
只需要將jquery.mCustomScrollbar.css所在文件夾的名字修改來(lái)不含有 malihu-custom-scrollbar-plugin 即可，比如直接將這個(gè)css放在你自己的css文件夾里~~~。
因?yàn)樵赾onfig里配置了匹配到 malihu-custom-scrollbar-plugin 就是用imports-loader在加載，所以導(dǎo)致引入的這個(gè)css沒(méi)有使用css-loader去加載并報(bào)錯(cuò)。
在該插件的css里使用了背景圖，webpack在打包時(shí)，除了js其他的所有類型都需要添加加載器loader，webpack 中引入圖片需要依賴 url-loader 這個(gè)加載器，
打包時(shí)遇到引用圖片報(bào)錯(cuò)：
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里使用插件的經(jīng)歷，對(duì)其理解還不夠深入~~~
相關(guān)文章
微博@符號(hào)的用戶名提示效果。(想@到誰(shuí)？)
相信你老早就在騰訊或者新浪的微博上體驗(yàn)到了，@符號(hào)在微博時(shí)代的便捷呼叫。2010-11-11
JavaScript中的Array 對(duì)象（數(shù)組對(duì)象）
Array 對(duì)象用于在單個(gè)的變量中存儲(chǔ)多個(gè)值。2016-06-06
原生JS實(shí)現(xiàn)圖片懶加載之頁(yè)面性能優(yōu)化
在項(xiàng)目開發(fā)中，我們往往會(huì)遇到一個(gè)頁(yè)面需要加載很多圖片的情況。這篇文章主要介紹了頁(yè)面性能優(yōu)化原生JS實(shí)現(xiàn)圖片懶加載 ,需要的朋友可以參考下2019-04-04
年底了各個(gè)公司都有抽獎(jiǎng)活動(dòng)，我也寫了一個(gè)超級(jí)簡(jiǎn)單的代碼來(lái)實(shí)現(xiàn)抽獎(jiǎng)效果，這里沒(méi)有華麗的Css3效果，但卻有短小精悍的js代碼。2015-01-01
這篇文章主要介紹了Javascript核心讀書有感之語(yǔ)句,需要的朋友可以參考下2015-02-02
JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
這篇文章主要介紹了JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox瀏覽器),需要的朋友可以參考下2014-09-09
JavaScript笛卡爾積超簡(jiǎn)單實(shí)現(xiàn)算法示例
這篇文章主要介紹了JavaScript笛卡爾積超簡(jiǎn)單實(shí)現(xiàn)算法,涉及javascript數(shù)組遍歷、添加簡(jiǎn)單操作技巧,需要的朋友可以參考下2018-07-07
js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法
下面小編就為大家?guī)?lái)一篇js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
SVG動(dòng)畫vivus.js庫(kù)使用小結(jié)(實(shí)例代碼)
本文通過(guò)代碼給大家介紹SVG動(dòng)畫vivus.js庫(kù)使用小結(jié)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全
這篇文章主要介紹了javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全的相關(guān)資料,需要的朋友可以參考下2016-01-01