webpack之loader执行顺序及原理

　　less-loader、css-loader、style-loader插件作用
　　less-loader：用于加载.less文件，将less转化为css
　　css-loader：用于加载.css文件，将css转化为commonjs
　　style-loader: 将样式通过先安装这几款插件
　　npm i style-loader css-loader less less-loader -D在webpack.config.js文件中加入如下配置＂use strict＂ const path = require(＂path＂) module.exports = {   mode: ＂production＂,   entry: {     index: ＂./src/index.js＂,     search: ＂./src/search.js＂   },   output: {     path: path.join(__dirname, ＂dist＂),     filename: ＂[name].js＂   },   mode: ＂production＂,   module: {     rules: [       {         test: /.css$/,         use: [           ＂style-loader＂,           ＂css-loader＂         ]       },       {         test: /.less$/,         use: [           ＂style-loader＂,           ＂css-loader＂,           ＂less-loader＂         ]       }     ]   } }解析less主要是通过以上代码中的以下部分{   test: /.less$/,   use: [   ＂style-loader＂,   ＂css-loader＂,   ＂less-loader＂   ] }
　　这里有一点要注意，他们的解析过程是链式的，所以在use数组中下面的部分会先执行，所以他们的执行顺序其实是less-loader > css-loader > style-loaderwebpack的加载从右往左进行?
　　其实为啥是从右往左，而不从左往右，只是Webpack选择了compose方式，而不是pipe的方式而已，在技术上实现从左往右也不会有难度。
　　函数组合：函数组合是函数式编程中非常重要的思想。
　　函数组合的两种形式：一种是pipe，另一种是compose。前者从左向右组合函数，后者方向相反。
　　在Uninx有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，所以我们传入参数的顺序编程了先传入double，后传入add1那么其实也可以实现从左往右const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x); const add1ThenDouble = pipe(   add1,   double ); add1ThenDouble(2); // 6 // ((2 + 1 = 3) * 2 = 6)
　　所以只不过webpack选择了函数式编程的方式，所以loader的顺序编程了从右往左，如果webpack选择了pipe的方式，那么大家现在写loader的时候的顺序就变成从左往右了compose : require(＂style-loader!css-loader!sass-loader!./my-styles.sass＂); pipe : require(＂./my-styles.sass!sass-loader!css-loader!style-loader＂);