Skip to content

Commit 75c8f10

Browse files
debs-obrienEugeneHlushko
authored andcommitted
docs: added more info for magic comments (#2707)
1 parent 13c3156 commit 75c8f10

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

src/content/api/module-methods.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ contributors:
77
- sokra
88
- fadysamirsadek
99
- byzyk
10+
- debs-obrien
1011
related:
1112
- title: CommonJS Wikipedia
1213
url: https://en.wikipedia.org/wiki/CommonJS
@@ -72,7 +73,9 @@ if ( module.hot ) {
7273

7374
W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use `import()` with older browsers, remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
7475

75-
The spec for `import` doesn't allow control over the chunk's name or other properties as "chunks" are only a concept within webpack. Luckily webpack allows some special parameters via comments so as to not break the spec:
76+
## Magic Comments
77+
78+
Inline comments to make features work. By adding comments to the import we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do.
7679

7780
``` js
7881
// Single target
@@ -88,6 +91,8 @@ import(
8891
/* webpackExclude: /\.noimport\.json$/ */
8992
/* webpackChunkName: "my-chunk-name" */
9093
/* webpackMode: "lazy" */
94+
/* webpackPrefetch: true */
95+
/* webpackPreload: true */
9196
`./locale/${language}`
9297
);
9398
```
@@ -100,7 +105,7 @@ import(/* webpackIgnore: true */ 'ignored-module.js');
100105

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

103-
`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.
108+
`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.
104109

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

@@ -109,6 +114,10 @@ W> Note that setting `webpackIgnore` to `true` opts out of code splitting.
109114
- `"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.
110115
- `"weak"`: Tries to load the module if the module function has already been loaded in some other way (i. e. 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.
111116

117+
`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/#prefetching-preloading-modules).
118+
119+
`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/#prefetching-preloading-modules).
120+
112121
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.
113122

114123
`webpackInclude`: A regular expression that will be matched against during import resolution. Only modules that match __will be bundled__.

0 commit comments

Comments
 (0)