Webpack separate loader chains for same filetype

Question

Is is possible to run two separate loader chains for the same extension?

In my case, I want to run one set of loaders to build a static file, and another to write a different set of files (for server side rendering)

  {
    test: /\.p?css$/,
    use: ExtractTextPlugin.extract([ "css-loader", "postcss-loader" ]),
  },
  {
    test: /\.p?css$/,
    use: [  
      {
        loader: "emit-file-loader",
        options: {
          name: "dist/[path][name].pcss",
        },
      },
      {
        loader: "skeleton-loader",
        options: {
          procedure: function (content) {
            return `module.exports = ${content}`
          },
        },
      },
      "postcss-loader",
    ]),
  }

But according to What is the loader order for webpack? it seems to run all loaders in the same chain, even if they're defined in separate rules.

Maybe I'm not understanding loaders fully, but is there a way to have each set of loaders (the use list) run independently?

Answer 1

I found a loader which is best suited for your case multi loader. This loader requires a module multiple times, each time loaded with a different loader. Like in a multi entry point the exports of the last item are exported.

var multi = require("multi-loader");
{
    module: {
        loaders: [
            {
                test: /\.css$/,
                // Add CSS to the DOM
                // and
                // Return the raw content
                loader: multi(
                    "style-loader!css-loader!autoprefixer-loader",
                    "raw-loader"
                )
            }
        ]
    }
}

or you can require same file twice using inline loaders at require statement like this

import Styles from 'style-loader!css-loader?modules!./styles.css';
import Styles from 'xyz-loader!sass-loader?modules!./styles.css';

and you can pass the configration option as query.

Also you can make alias for loader-name and configration and use that insted of writing loader-name and configration every time like this

in config file

resolveLoader: {
  alias: {
    myLoader1: "style-loader!css-loader?modules", // and much more
    myLoader2: "xyz-loader!sass-loader?modules" // and much more
  }
}

at import

import Styles from 'myLoader1!./styles.css';
import Styles from 'myLoader2!./styles.css';