javascript - 在请求中从 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');

---

已知解决方案

我的例子可以这样写(但不是我的答案):

webpack 配置

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 loader中很难使用变量

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

中创建相同的案例是很糟糕的

webpack 配置

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');