從請求中的webpack配置文件指定加載程序配置

Question

題

是否可以通過別名中的請求從webpack配置文件中指定加載程序？ 我正在尋找這種想法的實現：

webpack配置

loaders: [
    {   // loaderA - default
        test: /\.js/,
        loaders: ['loader-a1', 'loader-a2'] 
    },

    {   // loaderB - I want to enable this in require
        test: /\.js/,
        loaders: ['loader-b1', 'loader-b2'] 
    }
]

用法

默認值-將使用['loader-a1', 'loader-a2']

require('./module');

自定義-將使用['loader-b1', 'loader-b2'] ：禁用loaderA並啟用loaderB

require('!loaderB!./module');

---

已知解決方案

我的示例可以這樣寫（但不是我的答案）：

weback配置

loaders: [
    {
        test: /\.js/,
        loaders: ['loader-a1', 'loader-a2'] 
    }
]

用法

默認

require('./module');

習慣

require('!loader-b1!loader-b2!./module');

---

動機

1.按要求創建裝載機鏈可能很長且很干。 這個要求有時可能真的很長

require('!loader-b1!loader-b2!loader-b3!loader-b4!./module');

2.在需求加載器中很難使用變量

在webpack.config.js創建變量可以輕松處理加載程序的不同用例。 在內聯require包裝相同的案例太糟糕了

weback配置

loaders: [
    {
        test: /\.js/,
        loaders: [
            `loader-a1?${JSON.stringify({
                sourceMap: DEBUG,
                minimize: !DEBUG
             })}`, 
            `loader-a2?${JSON.stringify({
                sourceMap: DEBUG,
                minimize: !DEBUG
             })}`
        ] 
    }
]

用法

默認-在加載程序中使用變量

require('./module');

自定義-在加載程序中使用變量-看起來太糟糕了，您必須公開構建變量DEBUG

require(`!loader-b1?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}!loader-b2?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}!./module`);

小費

我用單詞別名 。

Answer 1

解決方案是resolveLoader.alias

webpack配置

module: {
    loaders: [
        {   // loaderA - default
            test: /\.js/,
            loaders: ['loader-a1', 'loader-a2'] 
        }
    ]
},
resolveLoader: {
    alias: {
        loaderB: ['loader-b1', 'loader-b2'] // I want to enable this in require
    }
}

用法

默認值-將使用['loader-a1'，'loader-a2']

require('./module');

自定義-將使用['loader-b1'，'loader-b2']：禁用loaderA並啟用loaderB

require('!loaderB!./module');

Answer 2

它可能不是您要找的答案 ，但是您可以修飾JavaScript文件擴展名，並為每個文件定義一個加載器

loaders: [
{   // loaderA - default
    test: /\(.a)?.js/,
    loaders: ['loader-a1', 'loader-a2'] 
},

{   // loaderB - I want to enable this in require
    test: /\.b.js/,
    loaders: ['loader-b1', 'loader-b2'] 
}
]

您可能希望使擴展名之一為可選，以便它可以回退到外部庫或其他JS文件。

您還可以使用includes屬性，該屬性將使用正則表達式，並告訴webpack僅在特定文件夾路徑中查找文件（您要使用loaderA運行）。