配置文件上百行是常事，如何保证各个loader按照预想方式工作？

[TieMuZhen]

loader的书写顺序很重要，因为loader的职责单一，组合使用的原则，所有loader一个一个处理的顺序很重要

怎么调整这个顺序很关键，但是如果你书写的时候已经排好了序，那就无所谓了，比如这样

module: {
  rules: [
    {
      test: /\.less$/,
      use: 'style-loader'
    },
   {
      test: /\.less$/,
      use: 'css-loader'
    },
   {
      test: /\.less$/,
      use: 'less-loader'
    }
  ]
}

默认是从下往上处理的

可以通过一个enforce属性来调整顺序，默认有以下几个值

• pre 优先处理
• normal 正常处理（默认）
• inline 其次处理(inline 官方不推荐使用)
• post 最后处理

module: {
  rules: [
    {
      test: /\.less$/,
      use: 'less-loader',
      enforce: 'pre'
    },
   {
      test: /\.less$/,
      use: 'css-loader'
    },
   {
      test: /\.less$/,
      use: 'style-loader',
      enforce: 'post'
    }
  ]
}

参考文献

• 【webpack】中enforce的使用方法