Specify bootloader configuration from webpack configuration file in request

Question

Question

Is it possible to specify the loader from the webpack configuration file in the request using something like an alias? I am looking for an implementation of this idea:

Webpack configuration

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

Using

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 it is not and the answer is for me):

Web browser configuration

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

Using

default

 require('./module'); 

order

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

---

Motivation

1. Creating loader chains on demand can be long and dry. It can sometimes be very long

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

2. It is difficult to use variables in bootloaders

Creating variables in webpack.config.js can easily handle various use cases for loaders. It's terrible to insert the same case in inline require

Web browser configuration

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

Using

default - use variables in bootloaders

 require('./module'); 

custom - using variables in bootloaders - it looks so awful and you need to set the DEBUG building variable

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

Tip

I used the word alias .

Answer 1

The solution for this is resolveLoader.alias

Webpack configuration

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

Using

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

 require('./module'); 

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

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

Answer 2

This may not be the answer you are looking for, but you can decorate your JavaScript file extensions and define 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 like to make one of the extensions additional so that it can return to external libraries or other JS files.

You can also use the includes property, which will take a regular expression and tell webpack only to search for files (which you want to run using loaderA) in a specific folder path.