快捷導(dǎo)航

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

更新時(shí)間：2018年05月30日 15:26:08 作者：Amor丶Diamond

malihu-custom-scrollbar-plugin是一個(gè)依賴jquery的自定義網(wǎng)頁滾動(dòng)條樣式插件，這篇文章主要介紹了webpack里使用jquery.mCustomScrollbar插件的方法，感興趣的小伙伴們可以參考一下

malihu-custom-scrollbar-plugin是一個(gè)依賴jquery的自定義網(wǎng)頁滾動(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里使用的方法

但是其只說啦引用js，還需要配合mCustomScrollbar的css才能正常使用。

如果直接將下載下來的mCustomScrollbar解壓，然后在js里require的話，你會發(fā)現(xiàn)使用webpack打包總是報(bào)錯(cuò)，

遇到這樣的報(bào)錯(cuò)時(shí)，說明你使用了mCustomScrollbar在npm上寫的引入方法，并且沒有更改下載下來的文件夾名。

只需要將jquery.mCustomScrollbar.css所在文件夾的名字修改來不含有 malihu-custom-scrollbar-plugin 即可，比如直接將這個(gè)css放在你自己的css文件夾里~~~。

因?yàn)樵赾onfig里配置了匹配到 malihu-custom-scrollbar-plugin 就是用imports-loader在加載，所以導(dǎo)致引入的這個(gè)css沒有使用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)歷，對其理解還不夠深入~~~

您可能感興趣的文章: