You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/api/module-methods.md
+17-1
Original file line number
Diff line number
Diff line change
@@ -73,11 +73,21 @@ W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/W
73
73
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:
74
74
75
75
```js
76
+
// single target
76
77
import(
77
78
/* webpackChunkName: "my-chunk-name" */
78
79
/* webpackMode: "lazy" */
79
80
'module'
80
81
);
82
+
83
+
// multiple possible targets
84
+
import(
85
+
/* webpackInclude: /\.json$/ */
86
+
/* webpackExclude: /\.noimport\.json$/ */
87
+
/* webpackChunkName: "my-chunk-name" */
88
+
/* webpackMode: "lazy" */
89
+
`./locale/${language}`
90
+
);
81
91
```
82
92
83
93
`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.
@@ -91,9 +101,15 @@ import(
91
101
92
102
T> Note that both options can be combined like so `/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data" */`. This is parsed as a JSON5 object without curly brackets.
93
103
104
+
`webpackInclude`: A regular expression that will be matched against during import resolution and only modules that matches __will be bundled__.
105
+
106
+
`webpackExclude`: A regular expression that will be matched against during import resolution and any module that matches __will not be bundled__.
107
+
108
+
T> Note that `webpackInclude` and `webpackExclude` options do not interfere with the prefix. eg: `./locale`.
109
+
94
110
W> Fully dynamic statements, such as `import(foo)`, __will fail__ because webpack requires at least some file location information. This is because `foo` could potentially be any path to any file in your system or project. The `import()` must contain at least some information about where the module is located, so bundling can be limited to a specific directory or set of files.
95
111
96
-
W> Every module that could potentially be requested on an `import()` call is included. For example, ``import(`./locale/${language}.json`)`` will cause every `.json` file in the `./locale` directory to be bundled into the new chunk. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption.
112
+
W> Every module that could potentially be requested on an `import()` call is included. For example, ``import(`./locale/${language}.json`)`` will cause every `.json` file in the `./locale` directory to be bundled into the new chunk. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption. Using the `webpackInclude` and `webpackExclude` options allows us to add regex patterns that reduce the files that webpack will bundle for this import.
97
113
98
114
W> The use of `System.import` in webpack [did not fit the proposed spec](https://github.com/webpack/webpack/issues/2163), so it was deprecated in webpack [2.1.0-beta.28](https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.28) in favor of `import()`.
0 commit comments