Webpack中解决jquery.mCustomScrollbar插件CSS与图片加载报错

jquery.mCustomScrollbar插件简介

malihu-custom-scrollbar-plugin是一款基于jQuery的自定义网页滚动条样式插件。

官方网址为：http://manos.malihu.gr/jquery-custom-content-scroller/

GitHub仓库地址：https://github.com/malihu/malihu-custom-scrollbar-plugin

该插件在npm上提供了在Webpack环境下的使用指南。

然而，其文档仅提及了JavaScript文件的引用方式，若需正常使用，还必须配合引入mCustomScrollbar对应的CSS样式文件。

Webpack打包CSS加载报错原因

如果直接解压下载的mCustomScrollbar包，并在JS代码中通过require引入，使用Webpack进行打包时往往会遇到报错。

当出现此类报错时，通常意味着你沿用了mCustomScrollbar在npm上提供的引入方式，且未修改下载文件夹的名称。

解决方法是将包含jquery.mCustomScrollbar.css的文件夹名称修改为不包含malihu-custom-scrollbar-plugin字符串的名称，例如直接将该CSS文件移至你项目中的css文件夹内即可。

这是因为在Webpack配置中，匹配到malihu-custom-scrollbar-plugin文件夹时，系统会使用imports-loader进行加载，从而导致该CSS文件未能正确通过css-loader处理并引发错误。

该插件的CSS文件中引用了背景图片。在Webpack打包过程中，除JavaScript外的其他类型资源均需添加对应的加载器（loader）。引入图片资源时，必须依赖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中集成插件的经历，目前对该技术的理解尚不够深入。