在请求中从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中创建加载器链可以是长而干的。这个要求有时可能真的会太长。

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
    }
}

使用

默认值-将使用“加载程序-A1”，“加载程序-a2”

require('./module');

自定义-将使用“加载程序-b1”，“加载器-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运行)。