如何在測試中為導入加載器配置添加模塊

Question

當我將舊版 webapp 轉換為基於 webpack 的應用程序時，它使用mCustomScrollbar 。 根據 mCustomScrollbar 的文檔，要使用 webpack 運行需要使用導入加載器。 但是 doc 中給出的語法與舊版本的 webpack 兼容，而不是最新版本。

根據imports-loader 的文檔，我無法將malihu-custom-scrollbar-plugin到modules-rules test中。

{
    test: /jquery-mousewheel/, /* This works fine */
    use: [{
            loader: "imports-loader",
            options: {
                imports: {
                    moduleName: "jquery",
                    name: "$"
                },
                wrapper: "window",
                additionalCode:
                    "var define = false;"
            }
        }]
},
{
    test: /malihu-custom-scrollbar-plugin/, /* Not working */
    use: [{
            loader: "imports-loader",
            options: {
                imports: {
                    moduleName: "jquery",
                    name: "$"
                },
                wrapper: "window",
                additionalCode:
                    "var define = false;"
            }
        }]
}

給出以下錯誤，

ERROR in ./node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css 8:6
Module parse failed: 'import' and 'export' may only appear at the top level (8:6)
File was processed with these loaders:
 * ./node_modules/imports-loader/dist/cjs.js

我的 vendor.js 如下所示，

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

import $ from "jquery";
window.jQuery = jQuery;
window.$ = $;

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

那么如何讓這個工作以及如何在同一個導入加載器中組合兩個模塊，在我的例子中是jquery-mousewheel malihu-custom-scrollbar-plugin和malihu-custom-scrollbar-plugin 。

Answer 1

由於 mCustomScrollbar 的.css文件與 webpack 的其他加載器產生問題，因此將導入加載器配置內聯添加到vendor.js並從 webpack 配置文件中刪除。

現在vendor.js如下所示，

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

import $ from "jquery";
window.jQuery = jQuery;
window.$ = $;

...
require("imports-loader?wrapper=window&!jquery-mousewheel");
require("imports-loader?wrapper=window&!malihu-custom-scrollbar-plugin");
...

有了這個 mCustomScrollbar 開始工作，讓我知道是否有更好的方法來做到這一點，或者這是正確的方法。