Webpack加载器执行顺序：预/后加载器与加载器链的区别

我来帮你把Webpack加载器的这些疑问理清楚，确实官方文档在这块的定义和执行逻辑讲得不够直白，咱们一步步拆解：

首先得明确Webpack处理模块时的三个执行阶段，这是理解两者区别的核心：

1. 预加载器阶段：所有标记了enforce: 'pre'的加载器会优先执行，不管它们在module.rules里的定义顺序如何，全部跑完后才会进入下一个阶段。这类加载器通常用来做代码检查、源码预处理（比如代码格式化），因为要处理最原始的源码。
2. 普通加载器阶段：没有设置enforce的加载器，按照你在module.rules里的书写顺序依次执行。而每个rule内部的use数组是从右到左执行的——也就是最后写的加载器先运行，比如use: ['a-loader', 'b-loader']会先执行b-loader，再把结果传给a-loader。这个链式配置是针对同一种文件类型的多步骤处理，比如先编译TS，再转译ES语法。
3. 后加载器阶段：所有标记了enforce: 'post'的加载器最后执行，同样不管定义顺序，都在普通加载器处理完之后运行。这类加载器一般用来做编译后的优化处理，比如代码混淆、校验编译结果等。

总结两者的区别：

• 预/后加载器是全局级别的执行优先级控制，决定了加载器在整个模块处理流程中的阶段位置；
• Rule.use的链式加载是单个规则内部的流程协作，针对同一类文件，多个加载器按顺序接力处理。

想要直观看到加载器的执行顺序，有几种实用的方式：

• 命令行参数：运行webpack --verbose，会输出非常详细的模块处理日志，包括每个模块被哪些加载器处理，以及处理的先后顺序。
• 配置stats选项：在webpack.config.js里自定义输出的日志内容，比如：

module.exports = {
  // ...其他配置
  stats: {
    modules: true,
    modulesSort: 'index', // 按模块的处理顺序排序
    reasons: true, // 显示加载器被触发的原因
    verbose: true // 输出详细的加载器执行细节
  }
}

这样运行Webpack时，就能清晰看到每个模块从预加载器到普通加载器再到后加载器的完整执行链路。

• 调试模式：运行webpack --debug可以获得更底层的调试信息，但输出内容会比较庞杂，适合排查特定问题时使用。

结合你的技术栈，正确的执行顺序和配置细节如下：

1. 预加载器：代码规范检查（TSLint/ESLint） #

因为要检查原始的TS代码，必须在编译之前执行，所以要把它设为预加载器：

注意：TSLint已经被官方废弃，现在更推荐用ESLint配合@typescript-eslint插件来做TS代码检查，下面以ESLint为例：

{
  test: /\.tsx?$/,
  enforce: 'pre',
  exclude: /node_modules/,
  use: ['eslint-loader'] // 或者用新的 eslint-webpack-plugin 插件形式
}

如果坚持用TSLint，就用tslint-loader，但建议尽快迁移到ESLint生态。

2. 普通加载器：TS编译 + Babel转译 #

处理TS文件的核心规则，use数组的顺序要注意是从右到左执行，所以配置如下：

{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    // 第二步：Babel转译，处理ES6+语法兼容、polyfill等
    {
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-env', // 根据目标浏览器转译语法
          '@babel/preset-react', // 如果项目用React的话
        ]
      }
    },
    // 第一步：ts-loader编译TS到ES6+ JS，同时做类型检查
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: true // 大型项目建议开启，配合 fork-ts-checker-webpack-plugin 把类型检查放到单独进程，提升构建速度
      }
    }
  ]
}

如果你的项目用@babel/preset-typescript来处理TS，可以去掉ts-loader，直接用babel-loader，但要注意：Babel不会做TS类型检查，所以需要单独通过tsc --noEmit命令或者fork-ts-checker-webpack-plugin来完成类型检查。

完整执行顺序 #

最终的模块处理流程是：
ESLint/TSLint（预加载器） → ts-loader → babel-loader → （如有后加载器则执行）

内容的提问来源于stack exchange，提问作者stilllife