Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions src/content/api/module-methods.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ contributors:
- chenxsan
- jamesgeorge007
- WofWca
- snitin315
related:
- title: CommonJS Wikipedia
url: https://en.wikipedia.org/wiki/CommonJS
Expand Down Expand Up @@ -140,19 +141,19 @@ import(/* webpackIgnore: true */ 'ignored-module.js');
new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
```

##### `webpackIgnore`
##### webpackIgnore

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.

W> Note that setting `webpackIgnore` to `true` opts out of code splitting.

##### `webpackChunkName`
##### 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.

##### `webpackFetchPriority`
##### webpackFetchPriority

<Badge text="5.87.0+" />

Expand All @@ -165,7 +166,7 @@ import(
);
```

##### `webpackMode`
##### webpackMode

Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. The following options are supported:

Expand All @@ -174,27 +175,27 @@ Since webpack 2.6.0, different modes for resolving dynamic imports can be specif
- `'eager'`: Generates no extra chunk. All modules are included in the current chunk and no additional network requests are made. A `Promise` is still returned but is already resolved. In contrast to a static import, the module isn't executed until the call to `import()` is made.
- `'weak'`: Tries to load the module if the module function has already been loaded in some other way (e.g. another chunk imported it or a script containing the module was loaded). A `Promise` is still returned, but only successfully resolves if the chunks are already on the client. If the module is not available, the `Promise` is rejected. A network request will never be performed. This is useful for universal rendering when required chunks are always manually served in initial requests (embedded within the page), but not in cases where app navigation will trigger an import not initially served.

##### `webpackPrefetch`
##### webpackPrefetch

Tells the browser that the resource is probably needed for some navigation in the future. Check out the guide for more information on [how webpackPrefetch works](/guides/code-splitting/#prefetchingpreloading-modules).

##### `webpackPreload`
##### webpackPreload

Tells the browser that the resource might be needed during the current navigation. Check out the guide for more information on [how webpackPreload works](/guides/code-splitting/#prefetchingpreloading-modules).

T> Note that all options can be combined like so `/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data" */`. This is wrapped in a JavaScript object and executed using [node VM](https://nodejs.org/dist/latest-v8.x/docs/api/vm.html). You do not need to add curly brackets.

##### `webpackInclude`
##### webpackInclude

A regular expression that will be matched against during import resolution. Only modules that match **will be bundled**.

##### `webpackExclude`
##### webpackExclude

A regular expression that will be matched against during import resolution. Any module that matches **will not be bundled**.

T> Note that `webpackInclude` and `webpackExclude` options do not interfere with the prefix. eg: `./locale`.

##### `webpackExports`
##### webpackExports

Tells webpack to only bundle the specified exports of a dynamically `import()`ed module. It can decrease the output size of a chunk. Available since [webpack 5.0.0-beta.18](https://github.com/webpack/webpack/releases/tag/v5.0.0-beta.18).

Expand Down