Skip to content

Commit 0317ee7

Browse files
committed
docs: clarify webpack loader execution order (right-to-left)
1 parent 046a2b1 commit 0317ee7

File tree

1 file changed

+2
-1
lines changed

1 file changed

+2
-1
lines changed

src/content/guides/asset-management.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ contributors:
1313
- astonizer
1414
- snitin315
1515
- Brennvo
16+
- mr-baraiya
1617
---
1718

1819
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
9798

9899
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.
99100

100-
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.
101+
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.
101102

102103
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`.
103104

0 commit comments

Comments
 (0)