一、原因

这设计的原因是为了处理代码转换和加载过程中的依赖关系。由于webpack的模块打包过程是从入口开始递归地解析和加载依赖，然后再进行代码转换，Loader的执行顺序也要与此过程保持一致。

当WEBpack遇到需要转换的模块时，它会按照配置中的Loader顺序依次应用这些Loader，将模块转换为javascript可以理解的形式。每个Loader可以对模块进行不同的转换，例如将Sass转换为CSS、将es6代码转换为ES5代码等。

由于Loader的执行顺序是从后往前的，这意味着后面的Loader可以在前面的Loader处理之后对代码进行进一步的转换或修改。这种方式允许开发者根据需求，按照特定的顺序配置Loader，确保代码转换和处理的正确性。

需要注意的是，Loader的执行顺序也可以通过Webpack配置文件进行调整，可以通过配置中的enforce属性来设置Loader的执行顺序。设置enforce:’pre’的Loader会在其他普通Loader之前执行，而设置enforce:’post’的Loader会在其他普通Loader之后执行。

总而言之，Webpack中Loader的执行顺序是从后往前的，这样可以确保代码转换和处理的正确性，以及与模块解析和加载的顺序保持一致。

二、为什么要使用webpack

我们在平常开发过程中可能经常遇到以下问题：

缺乏样式编译功能。浏览器不支持less sass语法；
不支持es6/es7(缺乏babel编译功能，把es6转成es5)；
开发的时候要是我们修改一下代码保存之后浏览器就自动更新就好了(缺乏热更新功能)；
本地请求远程接口会产生跨域问题(缺乏请求代理功能)；
缺乏自动压缩打包功能。比如：项目要上线了，要是能一键压缩代码啊图片什么的就好了；
webpack就是为了解决以上种种问题的。

延伸阅读

什么是Webpack

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack是一个模块打包器，它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transfORM）、打包（bundle）或包裹（package）任何资源(resource or asset)。