【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'
      }
    ]
  },