From bef3407a5a5d395683485483f479ac1a43b6b4f0 Mon Sep 17 00:00:00 2001 From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com> Date: Sun, 29 Mar 2026 07:49:10 +0000 Subject: [PATCH 1/5] docs: clarify webpack loader execution order (right-to-left) --- src/content/guides/asset-management.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/guides/asset-management.mdx b/src/content/guides/asset-management.mdx index 45ce536199ba..e7143bd979e4 100644 --- a/src/content/guides/asset-management.mdx +++ b/src/content/guides/asset-management.mdx @@ -13,6 +13,7 @@ contributors: - astonizer - snitin315 - Brennvo + - mr-baraiya --- If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled. @@ -97,7 +98,7 @@ npm install --save-dev style-loader css-loader 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. 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`. From d12821374116924808bc287c608f5737cc891cdb Mon Sep 17 00:00:00 2001 From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com> Date: Mon, 30 Mar 2026 16:08:21 +0000 Subject: [PATCH 2/5] docs: clarify loader execution order and update example --- src/content/guides/asset-management.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/content/guides/asset-management.mdx b/src/content/guides/asset-management.mdx index e7143bd979e4..5dd2fa030017 100644 --- a/src/content/guides/asset-management.mdx +++ b/src/content/guides/asset-management.mdx @@ -96,15 +96,19 @@ npm install --save-dev style-loader css-loader }; ``` -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. +Loaders in webpack are executed from **right to left** (i.e., from last to first in the `use` array). -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. +For example: -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"]; +``` + +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 `