As discussed in the previous subsection, Simple usage, complex usage generally refers to the use of a loader in context with another or a set of loaders in a chained pattern.

When multiple loaders are chained, it is important to remember that they are executed in reverse order!

This will be either right to left or bottom to top, depending on the array format you use. For instance, the following will apply:

• The last loader, which is called by the script first, will be passed the contents of the raw resource (the data or script being run by the loader).
• The first loader, called last, is expected to return JavaScript and an optional source map.
• The loaders in between will be executed with the result(s) of the previous loader in the chain.

So, in the following common example, foo-loader would be passed the raw resource, and bar-loader would receive the output of foo-loader and return the final transformed module and a source map, if necessary.

To chain loaders this way, start with the webpack.config.js configuration file, like this:

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.js/,
        use: [
         'bar-loader',
         'foo-loader'
        ]
      }
    ]
   }
 };

That's the configurations, but as chained loaders are complex by nature, it's good to follow a standard. What follows is a set of guidelines that will help your project come together without fraying at the edges.