webpack loaderのロード順序(右から左、下から上)

関数の組み合わせ
まず一つの概念を紹介します.関数の組み合わせ:関数の組み合わせは関数式プログラミングにおいて非常に重要な思想であり、その実現の構想も特に複雑ではありません.
関数の組み合わせの2つの形式(JavaScript関数式プログラミングの関数組合せ関数compseとpipeの実現)
二つの関数の組み合わせがあります.一つはpipeで、もう一つはcomposeです.前者は左から右へ関数を組み合わせます.後者の方向は反対です.以下は一番簡単な二つの関数を組み合わせるcomposeです.

let compose = (f, g) => (...args) => f(g(...args)); 

実際の応用では,2つの関数しか組み合わせられない組み合わせ関数は,明らかに要件を満たすことができず,任意の関数を組み合わせられる組み合わせ関数が必要である.次は二つの考えを提供します.
二つの方法の一つは再帰であり、一つは循環であり、実は同じである.具体的な考え方は、まず一つの組み合わせを書いて、二つの関数のcompose 2を使って、compose 2でまず伝達の最後の二つの関数を組み合わせて、一つの関数funcに戻ります.そして、compose 2でfuncと次の関数を組み合わせて、このように押します.
ループの方法

let compose2 = (f, g) => (...args) => f(g(...args)); let compose = (...funcArgs) => (...args) => { let funced = funcArgs[funcArgs.length - 1]; for (let i = funcArgs.length - 2; i >= 0; i--) { if (i === 0) { return compose2(funcArgs[i], funced)(...args); } funced = compose2(funcArgs[i], funced); } } //  compose              let pipe = (...funcArgs) => compose(...funcArgs.reverse()); 

再帰的方法

let compose2 = (f, g) => (...args) => f(g(...args)); let compose = (...funcArgs) => (...args) => { let [...funcArgsCopy] = funcArgs; let callSelf = func => { if (funcArgsCopy.length === 0) return func; let funced = compose2(funcArgsCopy.pop(), func); return callSelf(funced); } return callSelf(funcArgsCopy.pop())(...args); } let pipe = (...funcArgs) => compose(...funcArgs.reverse()); 

もっと簡単な考え方
上の考えはやはり面倒くさいです.組み合わせにこだわらずに前の関数の処理パラメータの後の戻り値を次の関数に伝えてください.
ループの方法

let compose = (...funcArgs) => (...args) => { for (let i = funcArgs.length - 1; i >= 0; i--) { args = i === funcArgs.length - 1 ? funcArgs[i](...args) : funcArgs[i](args); } return args; } let pipe = (...funcArgs) => compose(...funcArgs.reverse()); 

再帰的方法

let compose = (...funcArgs) => (...args) => { let [...funcArgsCopy] = funcArgs; let funced = (...func) => { if (funcArgsCopy.length === 0) return func[0]; func = funcArgsCopy.pop()(...func); return funced(func); } return funced(...args); } let pipe = (...funcArgs) => compose(...funcArgs.reverse()); 

そしてwebpackが採用している組み合わせを見てみましょう.
webpackのロードは右から左へ行います.
実はなぜ右から左に行くのですか?左から右に行かないで、ただWebpackはpipeの方式ではなくてcompse方式を選んでいます.技術的に左から右に行くのも難しくないです.
ユニックスにはpipelineという概念があります.普段はps aux grep nodeなどの接触もあります.これらは全部左から右に行きます.しかし、関数式プログラミングには組み合わせの概念があります.私たちの数学では一般的なf(g(x))は、関数式プログラミングで一般的に実現されています.

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x); const add1 = n => n + 1; // 1 const double = n => n * 2; //  2 const add1ThenDouble = compose( double, add1 ); add1ThenDouble(2); // 6 // ((2 + 1 = 3) * 2 = 6) 

ここでは先に実行したプラス1を見ることができます.その後実行したdoubleは、composeではreduceRightを採用しています.だから、私たちがパラメータに入る順番をプログラミングしました.
実は左から右に行くこともできます.
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
参考文献:
JavaScript関数式プログラミングの関数composeとpipeの実現
作者:小_
リンク:https://www.jianshu.com/p/5d91f44358db
ソース:略書
著作権は作者の所有に帰する.商業転載は作者に連絡して授権を獲得してください.商業転載ではないので、出典を明記してください.