Skip to content

Commit

Permalink
docs(api): add webpackIgnore usage with CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
snitin315 committed Nov 3, 2024
1 parent 1a04a5e commit 49294fa
Showing 1 changed file with 34 additions and 4 deletions.
38 changes: 34 additions & 4 deletions src/content/api/module-methods.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -133,22 +133,52 @@ import(
/* webpackPreload: true */
`./locale/${language}`
);
```

```js
import(/* webpackIgnore: true */ 'ignored-module.js');

new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
```

##### webpackIgnore

**JavaScript Usage**

Disables dynamic import parsing when set to `true`.

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.

```js
import(/* webpackIgnore: true */ 'ignored-module.js');

new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
```
W> Note that setting `webpackIgnore` to `true` opts out of code splitting.
**CSS Usage**
The `webpackIgnore` comment can control whether webpack processes a specific import or URL reference.
It works in certain cases out of the box but **doesn’t support all cases** by default due to performance reasons.
We support `webpackIgnore` in the following cases:
```css
@import /* webpackIgnore: false */ url(./basic.css);

.class {
color: red;
background: /* webpackIgnore: true */ url('./url/img.png');
}

.class {
background-image: image-set(
/*webpackIgnore: true*/ url(./url/img1x.png) 1x,
url(./url/img2x.png) 2x,
url(./url/img3x.png) 3x
);
}
```
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.
##### webpackChunkName
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.
Expand Down

0 comments on commit 49294fa

Please sign in to comment.