CODEWITHSUNDEEP
webpackwebpack-2
Craig Kochis
Craig Kochis

Reputation: 883

Webpack separate loader chains for same filetype

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?

Upvotes: 11

Views: 3231

Answers (2)

Tripurari Shankar
Tripurari Shankar

Reputation: 3538

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';

Upvotes: 3

Daniel Abrahão
Daniel Abrahão

Reputation: 29

You can include and exclude files using Regular Expression on each rule.

In the Condition section of the documentation, they list some possible values those properties accept. Here some I think that could help you:

  • A string: To match the input must start with the provided string. I. e. an absolute directory path, or absolute path to the file.
  • A RegExp: It's tested with the input.
  • A function: It's called with the input and must return a truthy value to match.

I've used the RegExp approach in a project, separating the special case in a specific folder. So in the the webpack config I included the folder in one set of rules and excluded from the other. For example:

{
  test: /\.p?css$/,
  include: /specific_folder/,
  use: ExtractTextPlugin.extract([ "css-loader", "postcss-loader" ])
},
{
  test: /\.p?css$/,
  exclude: /specific_folder/,
  use: [  ... ]
}

Upvotes: 2

Related Questions