Webpack 5：模块规则直接配置loader与通过use配置的差异

写法差异 #

两种写法核心都是配置babel-loader，但语法形式不同：

• 写法一：使用loader+options的扁平配置，是Webpack针对单个loader场景提供的简化语法，直接在规则对象下声明loader路径和对应配置。

  {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      loader: require.resolve('babel-loader'),
      options: { rootMode: 'root', cacheDirectory: true }
  }
  

• 写法二：使用use数组配置，是Webpack通用的loader配置方式，use数组的每个元素对应一个loader的完整配置对象，支持同时配置多个loader。

  {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      use: [{
          loader: require.resolve('babel-loader'),
          options: { rootMode: 'root', cacheDirectory: true }
      }]
  }
  

是否可以互换 #

在仅配置单个loader的场景下，这两种写法功能完全等价，Webpack内部会自动将loader+options的写法转换为use数组的形式处理，因此可以互换。但如果需要给同一类文件配置多个loader（比如先通过eslint-loader做代码检查，再用babel-loader转译），写法一无法实现，只能使用写法二的use数组来依次配置多个loader。

哪种写法更推荐 #

优先推荐写法二，原因如下：

• 扩展性更强：后续如果需要新增其他loader（如代码检查、样式预处理类的loader），直接在use数组中添加新的配置对象即可，无需重构现有配置结构。
• 风格统一：如果项目中存在多loader的规则配置，统一使用use写法可以保持配置风格一致，降低团队成员的理解和维护成本。
• 语义更清晰：use数组的写法明确表达了“对匹配文件应用一系列loader”的语义，比扁平的loader写法更直观。

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