CODEWITHSUNDEEP
webpack
Nathan Lutterman
Nathan Lutterman

Reputation: 1885

Why are loaders read from right to left in webpack?

In webpack, when loaders are applied to some files such as:

require("style-loader!css-loader!less-loader!./my-styles.less");

they work from right to left.

As it seems odd to me, what is the technical reason for this?

Upvotes: 3

Views: 763

Answers (2)

wpcarro
wpcarro

Reputation: 1536

I think it's important to note the difference between piping and composing. In *nix environments, you can pipe commands from left-to-right:

cat file.txt | egrep cars > output.txt

But in functional programming you can compose functions together and the functions will execute from right-to-left:

var fn0 = compose(divide(2), add(3));

var fn1 = pipe(add(3), divide(2));

fn0 and fn1 will have the same effects on their inputs. Both will first add 3 to their inputs and divide the output of that operation by 2. Since we naturally read from left-to-right, the compose conventions require some familiarizing.

It seems to me that Webpack is following the convention of composing versus piping as it's ordered right-to-left. Check out Ramda's docs for a technical specification:

piping: http://ramdajs.com/0.19.1/docs/#pipe

composing: http://ramdajs.com/0.19.1/docs/#compose

Upvotes: 3

katranci
katranci

Reputation: 2571

It is because it follows the pipeline concept in unix, so output of one process becomes input of the next one. Since the intention is processing my-styles.less through less-loader first, they are written side by side separated by a pipe (i.e. !). It could have been implemented to allow require("./my-styles.less!less-loader!css-loader!style-loader"); as well. There isn't any technical difficulty difference between the two.

Upvotes: 3

Related Questions