Specify loader configuration from webpack config file in request

Question

Question

Is possible to specify loader from webpack config file in request by something like alias? I'm looking for implementation of this idea:

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

usage

default - will use ['loader-a1', 'loader-a2']

require('./module');

custom - will use ['loader-b1', 'loader-b2']: disable loaderA and enable loaderB

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

Known solution

My example can be written like this (but is not and answer for me):

weback config

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

usage

default

require('./module');

custom

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

Motivation

1. Creating loaders chain in require can be long and DRY. This require can sometimes can be really to long

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

2. It's hard to use variables in require loaders

Creating variables in webpack.config.js can easily handle different use case of loaders. It's awful to crate the same case in inline require

weback config

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

usage

default - using variables in loaders

require('./module');

custom - using variables in loaders - it looks so awful and you have to expose building variable DEBUG

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

Tip

I used word alias.

You could have custom extension regex. `/\.a.js$/` – Sean Larkin Jun 16 '16 at 22:05 — Sean Larkin, Jun 16 '16 at 22:05

Everettss · Accepted Answer · 2016-07-01T12:56:03.067

Solution for this is resolveLoader.alias

webpack config

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

usage

default - will use ['loader-a1', 'loader-a2']

require('./module');

custom - will use ['loader-b1', 'loader-b2']: disable loaderA and enable loaderB

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

score 2 · Answer 2 · answered Jun 16 '16 at 22:10

It may not be the answer you are looking for, but you could decorate the JavaScript file extensions and have a loader definition for each

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

You would want to make one of the extensions optional so that it can fall back to external libraries or other JS files.

You could also use the includes property which will take a regex and tell webpack to only look for files (you want to run with loaderA) in a specific folder path.

Yes, it can be done that way. There is some caveat of this solution: when I want to use `loaderB` on external files (for example from node_modules) I must create file between with extension `.b.js` containing only `require('external_module')`. — Everettss, Jun 17 '16 at 13:20

Specify loader configuration from webpack config file in request

Question

Known solution

Motivation

Tip

2 Answers2

Linked