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里使用插件的經歷，對其理解還不夠深入~~~