在请求中从 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. 在 require 加载器中很难使用变量

在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 运行）。