Multiple webpack rules in vue.config.js - order

Question

When I'm using both raw-loader and yaml-loader, It looks like the order plays an important role. Any idea why?

---

vue.config.js

Works:

chainWebpack: config => {
        config.resolve.extensions.add('.yml').add('.yaml');
        config.module
            .rule('yaml')
              .test(/\.ya?ml?$/)
              .use('json-loader')
              .loader('json-loader')
              .end()
              .use('yaml-loader')
              .loader('yaml-loader')
              .end()
            .rule('raw')
              .test(/\.txt$/)
              .use('raw-loader')
              .loader('raw-loader')
              .end();
    }

Does not work:

chainWebpack: config => {
        config.resolve.extensions.add('.yml').add('.yaml');
        config.module
            .rule('raw')
              .test(/\.txt$/)
              .use('raw-loader')
              .loader('raw-loader')
              .end()
            .rule('yaml')
              .test(/\.ya?ml?$/)
              .use('json-loader')
              .loader('json-loader')
              .end()
              .use('yaml-loader')
              .loader('yaml-loader')
              .end();