webpack之loader执行顺序及原理

　　lessloader、cssloader、styleloader插件作用
　　lessloader：用于加载。less文件，将less转化为css
　　cssloader：用于加载。css文件，将css转化为commonjs
　　styleloader：将样式通过先安装这几款插件
　　npmistyleloadercssloaderlesslessloaderD在webpack。config。js文件中加入如下配置usestrictconstpathrequire（path）module。exports｛mode：production，entry：｛index：。srcindex。js，search：。srcsearch。js｝，output：｛path：path。join（dirname，dist），filename：〔name〕。js｝，mode：production，module：｛rules：〔｛test：。css，use：〔styleloader，cssloader〕｝，｛test：。less，use：〔styleloader，cssloader，lessloader〕｝〕｝｝解析less主要是通过以上代码中的以下部分｛test：。less，use：〔styleloader，cssloader，lessloader〕｝
　　这里有一点要注意，他们的解析过程是链式的，所以在use数组中下面的部分会先执行，所以他们的执行顺序其实是lessloadercssloaderstyleloaderwebpack的加载从右往左进行？
　　其实为啥是从右往左，而不从左往右，只是Webpack选择了compose方式，而不是pipe的方式而已，在技术上实现从左往右也不会有难度。
　　函数组合：函数组合是函数式编程中非常重要的思想。
　　函数组合的两种形式：一种是pipe，另一种是compose。前者从左向右组合函数，后者方向相反。
　　在Uninx有pipeline的概念，平时应该也有接触，比如psauxgrepnode，这些都是从左往右的。
　　但是在函数式编程中有组合的概念，我们数学中常见的f（g（x）），在函数式编程一般的实现方式是从右往左，如constcompose（。。。fns）xfns。reduceRight（（v，f）f（v），x）constadd1nn1加1constdoublenn2乘2constadd1ThenDoublecompose（double，add1）add1ThenDouble（2）6（（213）26）
　　这里可以看到我们先执行的加1，然后执行的double，在compose中是采用reduceRight，所以我们传入参数的顺序编程了先传入double，后传入add1那么其实也可以实现从左往右constpipe（。。。fns）xfns。reduce（（v，f）f（v），x）；constadd1ThenDoublepipe（add1，double）；add1ThenDouble（2）；6（（213）26）
　　所以只不过webpack选择了函数式编程的方式，所以loader的顺序编程了从右往左，如果webpack选择了pipe的方式，那么大家现在写loader的时候的顺序就变成从左往右了compose：require（styleloader！cssloader！sassloader！。mystyles。sass）；pipe：require（。mystyles。sass！sassloader！cssloader！styleloader）；