Skip to content

Commit 49294fa

Browse files
committed
docs(api): add webpackIgnore usage with CSS
1 parent 1a04a5e commit 49294fa

File tree

1 file changed

+34
-4
lines changed

1 file changed

+34
-4
lines changed

src/content/api/module-methods.mdx

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,22 +133,52 @@ import(
133133
/* webpackPreload: true */
134134
`./locale/${language}`
135135
);
136-
```
137136

138-
```js
139137
import(/* webpackIgnore: true */ 'ignored-module.js');
140-
141-
new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
142138
```
143139

144140
##### webpackIgnore
145141

142+
**JavaScript Usage**
143+
146144
Disables dynamic import parsing when set to `true`.
147145

148146
When using `import.meta.url`, it does not remain as-is; instead, it gets replaced based on the `baseURI`. For modules, it is replaced with `new URL("./", import.meta.url)`, and for other cases, it defaults to `document.baseURI`. This ensures that relative URLs work correctly, aligning with the base URL context.
149147

148+
```js
149+
import(/* webpackIgnore: true */ 'ignored-module.js');
150+
151+
new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
152+
```
153+
150154
W> Note that setting `webpackIgnore` to `true` opts out of code splitting.
151155
156+
**CSS Usage**
157+
158+
The `webpackIgnore` comment can control whether webpack processes a specific import or URL reference.
159+
It works in certain cases out of the box but **doesn’t support all cases** by default due to performance reasons.
160+
161+
We support `webpackIgnore` in the following cases:
162+
163+
```css
164+
@import /* webpackIgnore: false */ url(./basic.css);
165+
166+
.class {
167+
color: red;
168+
background: /* webpackIgnore: true */ url('./url/img.png');
169+
}
170+
171+
.class {
172+
background-image: image-set(
173+
/*webpackIgnore: true*/ url(./url/img1x.png) 1x,
174+
url(./url/img2x.png) 2x,
175+
url(./url/img3x.png) 3x
176+
);
177+
}
178+
```
179+
180+
T> For other CSS scenarios, [`css-loader` fully supports `webpackIgnore`](/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment), allowing more flexibility if needed.
181+
152182
##### webpackChunkName
153183
154184
A name for the new chunk. Since webpack 2.6.0, the placeholders `[index]` and `[request]` are supported within the given string to an incremented number or the actual resolved filename respectively. Adding this comment will cause our separate chunk to be named [my-chunk-name].js instead of [id].js.

0 commit comments

Comments
 (0)