什么是Webpack Loader和Plugin的执行顺序！如何控制它们的执行顺序！

在Webpack中，Loader和Plugin的执行顺序是不同的。

Loader是用于对模块的源代码进行转换和处理的工具。

它们按照从右到左，从下到上的顺序链式调用。

也就是说，Loader的执行顺序是从最后一个配置的Loader开始，逐级向前执行。例如，如下所示的Loader配置中，执行顺序是style-loader → css-loader → sass-loader：

module: {
  rules: [
    { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }
  ]
}

Plugin则在整个Webpack构建过程中提供了更广泛的功能。它们可以用于执行范围更广的任务，如资源优化、文件操作、环境变量注入等。Plugin的执行顺序是由Webpack确定的，通常是通过订阅Webpack的生命周期事件来触发不同的插件操作。因此，Plugin的执行顺序是与Webpack的生命周期相关的。

如果你想明确控制Loader或Plugin的执行顺序，可以使用Webpack的 enforce属性。对于Loader，你可以在配置中使用该属性来指定Loader的执行顺序。在相同的位置中，值越高的enforce属性的Loader将在值较低的Loader之前执行。例如：

module: {
  rules: [
    { test: /\.css$/, use: ["style-loader", "css-loader"] },
    { test: /\.css$/, use: ["style-loader", { loader: "css-loader", options: { modules: true } }], enforce: "post" }
  ]
}

对于Plugin，你可以通过配置的顺序来控制执行顺序。Webpack会按照配置中的插件顺序依次调用它们的相应钩子函数。因此，你可以通过调整插件的顺序来控制它们的执行顺序。

总的来说，通过Loader的链式调用和Plugin的配置顺序，你可以相对灵活地控制它们的执行顺序。