Webpack loader splitter circuits for the same file type

Question

Is it possible to run two separate loader circuits for the same extension?

In my case, I want to run one set of bootloaders to create a static file, and another to write another 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 bootloader order for webpack? all bootloaders seem to run in the same chain, even if they are defined in separate rules.

I may not completely understand the bootloaders, but is there a way for each set of bootloaders (the use list) to run independently?

Answer 1

You can include and exclude files using a regular expression for each rule.

The Conditions section of the documentation lists some of the possible values ​​that take these properties. Here are some that I think may help you:

• String: to match the input value, start with the provided string. I. e. absolute path to the directory or absolute path to the file.
• RegExp: It is tested with input.
• Function: It is called using input and should return a plausible value.

I used the RegExp approach in the project, separating the special case in a specific folder. Thus, in the webpack configuration, I included the folder in one set of rules and was excluded from another. For example:

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

Answer 2

I found a bootloader that works best for your multi- bootloader business. This bootloader requires a module several times, each time when loading another bootloader. Like a point with multiple inputs, the export of the last item is 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 request the same file twice using the built-in loaders in the 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 configuration parameter as a request.

You can also make an alias for the bootloader name and configuration and use it to write the bootloader name and configuration each time

in the configuration file

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

upon import

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