docs: clarify webpack loader execution order (right-to-left) by mr-baraiya · Pull Request #8136 · webpack/webpack.js.org

mr-baraiya · 2026-03-29T07:51:56Z

Summary

Fixes a misleading explanation in asset-management.mdx regarding loader execution order. Clarifies that webpack applies loaders from right to left, so css-loader runs before style-loader.

What kind of change does this PR introduce?

docs

Did you add tests for your changes?

No (documentation change only)

Does this PR introduce a breaking change?

No

Use of AI

No

vercel · 2026-03-29T07:52:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webpack-js-org	Ready	Preview, Comment	Apr 16, 2026 4:20pm

alexander-akait · 2026-03-30T15:08:35Z

 Module loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects JavaScript to be returned by the last loader in the chain.

-The above order of loaders should be maintained: [`'style-loader'`](/loaders/style-loader) comes first and followed by [`'css-loader'`](/loaders/css-loader). If this convention is not followed, webpack is likely to throw errors.
+The above order of loaders should be maintained: [`'style-loader'`](/loaders/style-loader) should be listed before [`'css-loader'`](/loaders/css-loader) in the `use` array, but webpack applies them from right to left—so `'css-loader'` runs first, then `'style-loader'`. If this convention is not followed, webpack is likely to throw errors.


To be honestly and before and now is misleading, I think we should rewrite it...

mr-baraiya · 2026-03-30T17:08:06Z

Rewrote this part to make the execution order clear and removed the confusing wording. Let me know if this works 👍

mr-baraiya · 2026-04-13T17:23:22Z

Hi @alexander-akait, just checking if the latest rewrite looks good to you.
Happy to make further improvements if needed. Thanks!

alexander-akait · 2026-04-14T11:22:09Z


-T> webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case, any file that ends with `.css` will be served to the `style-loader` and the `css-loader`.
+```js
+use: ["style-loader", "css-loader"];


Let's use other loaders than style-loader and css-loader, they will be deprecated soon in favor of experiments.css, you can use postcss-loader and sass-loader/less-loader for this example

Copilot

Pull request overview

Updates the Asset Management guide to correct the explanation of webpack loader execution order, clarifying that loaders run from right to left in a use array.

Changes:

Adds a new contributor entry.
Rewrites the loader-chaining explanation to emphasize right-to-left execution order and adds an illustrative example.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-16T14:37:55Z

+```js
+use: ["postcss-loader", "sass-loader"];
+```
+
+Here, `css-loader` runs first and processes the CSS, followed by `style-loader`, which injects the result into the DOM.

-This enables you to `import './style.css'` into the file that depends on that styling. Now, when that module is run, a `<style>` tag with the stringified css will be inserted into the `<head>` of your html file.
+So even though `style-loader` appears before `css-loader` in the array, the execution happens in reverse order.


The example use: ["postcss-loader", "sass-loader"] doesn’t match the explanation below it: the text talks about css-loader/style-loader and DOM injection, but those loaders are not in the example array. This makes the execution-order clarification incorrect/confusing (with the current example, sass-loader would run before postcss-loader). Consider either switching the example to the ['style-loader', 'css-loader'] chain shown above, or updating the explanation to describe sass-loader -> postcss-loader correctly.

…s-loader and sass-loader

Copilot

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-16T14:45:25Z


-T> webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case, any file that ends with `.css` will be served to the `style-loader` and the `css-loader`.
+```js
+use: ["postcss-loader", "sass-loader"];


The new use snippet is not valid in a typical webpack.config.js object literal (; and double-quotes), and it’s inconsistent with the surrounding examples that use single quotes and a trailing comma. Consider changing it to a config-style property (single quotes, trailing comma) so readers can copy/paste it directly.

Suggested change

use: ["postcss-loader", "sass-loader"];

use: ['postcss-loader', 'sass-loader'],

Copilot · 2026-04-16T14:45:26Z

@@ -95,15 +96,19 @@ npm install --save-dev style-loader css-loader
 };
 ```



This section shows test: /\.css$/i in the config diff, but the explanatory sentence about test being a regex that selects which files the rule applies to was removed. Consider reintroducing a short explanation (e.g., that this rule targets .css files) so the example is self-contained for readers unfamiliar with webpack’s module.rules format.

Suggested change

In this rule, `test: /\.css$/i` is a regular expression that tells webpack to apply the rule to `.css` files.

…lanation

Copilot

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-16T14:52:30Z

+```js
+use: ['postcss-loader', 'sass-loader'],
+```
+
+In this rule, `test: /\.css$/i` is a regular expression that tells webpack to apply the rule to `.css` files.
+
+Here, `sass-loader` runs first and compiles Sass into CSS, followed by `postcss-loader`, which applies further transformations.



The example references test: /\.css$/i and describes how the rule applies to .css files, but the shown use: ['postcss-loader', 'sass-loader'] chain typically corresponds to .scss/.sass input (and the snippet omits the test line entirely). Consider either showing the full rule (including test) with a matching extension for sass-loader, or switching the example loaders to ones that apply to .css so the explanation stays internally consistent.

Copilot · 2026-04-16T14:52:30Z

+Loaders in webpack are executed from **right to left** (i.e., from last to first in the `use` array).



This section explains the general right-to-left execution order, but it no longer explicitly ties that back to the earlier use: ['style-loader', 'css-loader'] example (i.e., that css-loader runs first and style-loader runs last). Adding one short sentence that applies the rule to the preceding config would better resolve the original confusion this PR is addressing.

mr-baraiya · 2026-04-16T16:29:20Z

Addressed all suggestions. Please review 🙌

vercel bot deployed to Preview March 29, 2026 07:54 View deployment

alexander-akait reviewed Mar 30, 2026

View reviewed changes

vercel bot deployed to Preview March 30, 2026 16:10 View deployment

alexander-akait reviewed Apr 14, 2026

View reviewed changes

mr-baraiya added 2 commits April 16, 2026 14:32

docs: clarify webpack loader execution order (right-to-left)

bef3407

docs: clarify loader execution order and update example

d128213

Copilot AI review requested due to automatic review settings April 16, 2026 14:35

mr-baraiya force-pushed the fix/loader-order-docs branch from 5723f45 to d128213 Compare April 16, 2026 14:35

Copilot started reviewing on behalf of mr-baraiya April 16, 2026 14:36 View session

Copilot AI reviewed Apr 16, 2026

View reviewed changes

docs: clarify loader execution order and update example to use postcs…

b19136c

…s-loader and sass-loader

vercel bot deployed to Preview April 16, 2026 14:41 View deployment

mr-baraiya requested a review from Copilot April 16, 2026 14:42

Copilot started reviewing on behalf of mr-baraiya April 16, 2026 14:42 View session

Copilot AI reviewed Apr 16, 2026

View reviewed changes

docs: clarify loader execution order, update example, and improve exp…

df6994c

…lanation

mr-baraiya requested a review from Copilot April 16, 2026 14:50

Copilot started reviewing on behalf of mr-baraiya April 16, 2026 14:50 View session

vercel bot deployed to Preview April 16, 2026 14:51 View deployment

Copilot AI reviewed Apr 16, 2026

View reviewed changes

docs: fix mdx syntax and update loader example structure

33d38e4

vercel bot deployed to Preview April 16, 2026 16:20 View deployment

alexander-akait approved these changes Apr 17, 2026

View reviewed changes

alexander-akait merged commit 939b0d8 into webpack:main Apr 17, 2026
9 checks passed

	use: ["postcss-loader", "sass-loader"];
	use: ['postcss-loader', 'sass-loader'],

		@@ -95,15 +96,19 @@ npm install --save-dev style-loader css-loader
		};
		```



	In this rule, `test: /\.css$/i` is a regular expression that tells webpack to apply the rule to `.css` files.

		Loaders in webpack are executed from right to left (i.e., from last to first in the `use` array).

Uh oh!

Conversation

mr-baraiya commented Mar 29, 2026

Uh oh!

vercel bot commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexander-akait Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

mr-baraiya commented Mar 30, 2026

Uh oh!

mr-baraiya commented Apr 13, 2026

Uh oh!

alexander-akait Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

mr-baraiya commented Apr 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Mar 29, 2026 •

edited

Loading