如何在imports-loader配置的test规则中添加多个模块并正常生效？

错误原因 #

你当前配置的malihu-custom-scrollbar-plugin匹配规则没有限定文件类型，会命中该插件目录下的所有文件（包括你引入的.css样式文件），imports-loader仅用于处理JS模块，直接处理CSS文件就会抛出语法错误。

修正方案 #

1. 调整loader匹配规则，同时合并两个模块的配置 #

直接修改module.rules中的对应配置，通过正则同时匹配两个模块，且仅命中JS文件：

{
    test: /(jquery-mousewheel|malihu-custom-scrollbar-plugin).*\.js$/,
    use: [{
        loader: "imports-loader",
        options: {
            imports: {
                moduleName: "jquery",
                name: "$"
            },
            wrapper: "window",
            additionalCode: "var define = false;"
        }
    }]
}

2. 修正vendor.js中的变量赋值错误 #

你当前代码中window.jQuery = jQuery;直接引用了未定义的jQuery变量，需要修改为：

import $ from "jquery";
window.$ = $;
window.jQuery = $; // 修正这里，用已定义的$变量赋值

import "malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css";

require("jquery-mousewheel")($);
require("malihu-custom-scrollbar-plugin")($);

改完之后重新启动webpack编译即可解决报错。

内容的提问来源于stack exchange，提问作者Sheel