Question

问题

可以通过别名之类的东西在webpack配置文件中指定加载器吗？我正在寻找这个想法的实现：

webpack config

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 config

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. 在require loaders中使用变量很难

在webpack.config.js中创建变量可以轻松处理不同的加载器用例。在内联require

中创建相同的案例是非常糟糕的

weback config

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 config

$('#address').bind("typeahead:autocompleted", addressPicker.updateMap);

<强>使用

默认 - 将使用['loader-a1'，'loader-a2']

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

custom - 将使用['loader-b1'，'loader-b2']：禁用loaderA并启用loaderB

require('./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运行）。

在请求中从webpack配置文件中指定加载程序配置

问题

已知解决方案

动机

提示

2 个答案: