【webpack】中enforce的使用方法

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

 

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

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

默认是从下王上处理的

 

可以通过一个 enforce 属性，默认有以下几个值

1. pre 优先处理
2. normal 正常处理（默认）
3. inline 其次处理
4. post 最后处理

 

通过设置这个值来调整顺序

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