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: website/docs/en/api/cli.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Command Line Interface (CLI)
2
2
3
-
@rspack/cli provides two common subcommands, serve and build, to simplify daily work. If you do not have @rspack/cli installed, please read the [Quick Start](/guide/start/quick-start) section first.
3
+
[@rspack/cli](https://npmjs.com/package/@rspack/cli) provides two common subcommands, serve and build, to simplify daily work. If you do not have @rspack/cli installed, please read the [Quick Start](/guide/start/quick-start) section first.
4
4
5
5
:::warning Compatible with webpack-cli
6
6
@rspack/cli is not going to be compatible with webpack-cli, so there will be many differences between the two.
Copy file name to clipboardExpand all lines: website/docs/en/api/runtime-api/module-methods.mdx
+14-10Lines changed: 14 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,21 +5,21 @@ import { ApiMeta } from '@components/ApiMeta';
5
5
6
6
# Module Methods
7
7
8
-
This section covers all methods available in code compiled with Rspack. When using Rspack to bundle your application, you can pick from a variety of module syntax styles including ES6, CommonJS.
8
+
This section covers all methods available in code compiled with Rspack. When using Rspack to bundle your application, you can pick from a variety of module syntax styles including [ES modules](https://nodejs.org/api/esm.html#modules-ecmascript-modules) and [CommonJS](https://nodejs.org/api/modules.html).
9
9
10
-
While Rspack supports multiple module syntaxes, we recommend following a single syntax for consistency and to avoid odd behaviors/bugs.
10
+
While Rspack supports multiple module syntaxes, we recommend following a single syntax for consistency and to avoid odd behaviors or bugs.
11
11
12
-
Actually Rspack would enforce the recommendation for `.mjs` files, `.cjs` files or `.js` files when their nearest parent `package.json` file contains a `"type"` field with a value of either `"module"` or `"commonjs"`. Please pay attention to these enforcements before you read on:
12
+
Actually Rspack would enforce the recommendation for `.mjs` files, `.cjs` files or `.js` files when their nearest parent `package.json` file contains a ["type"](https://nodejs.org/api/packages.html#type) field with a value of either `"module"` or `"commonjs"`. Please pay attention to these enforcements before you read on:
13
13
14
14
-`.mjs` or `.js` with `"type": "module"` in package.json
15
15
- No CommonJS allowed, for example, you can't use `require`, `module.exports` or `exports`
16
16
- File extensions are required when importing, e.g, you should use import './src/App.mjs' instead of import './src/App' (you can disable this enforcement with Rule.resolve.fullySpecified)
17
17
-`.cjs` or `.js` with "type": "commonjs" in package.json
18
18
- Neither import nor export is available
19
19
20
-
## ES6 (Recommended)
20
+
## ES modules (Recommended)
21
21
22
-
Rspack support ES6 module syntax natively, you can use static `import`, `export` and `import()` syntax.
22
+
Rspack support ES modules syntax natively, you can use static `import`, `export` and `import()` syntax.
23
23
24
24
:::warning
25
25
Keep in mind that you will still probably need SWC or Babel for other ES6+ features.
@@ -67,7 +67,9 @@ export default {
67
67
function import(path:string):Promise;
68
68
```
69
69
70
-
Dynamically load modules. Calls to `import()` are treated as split points, meaning the requested module and its children are split out into a separate chunk.
70
+
Dynamically load modules, see [Dynamic import](/guide/optimization/code-splitting#dynamic-import) for more details.
71
+
72
+
Calls to `import()` are treated as split points, meaning the requested module and its children are split out into a separate chunk.
71
73
72
74
```js
73
75
if (module.hot) {
@@ -78,14 +80,15 @@ if (module.hot) {
78
80
```
79
81
80
82
:::warning
81
-
This feature relies on `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).
83
+
This feature relies on `Promise` internally. If you use `import()` with legacy browsers, remember to shim `Promise` using a polyfill such as[core-js](https://github.com/zloirock/core-js),[es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
82
84
:::
83
85
84
86
#### Dynamic expressions in import()
85
87
86
88
It is not possible to use a fully dynamic import statement, such as `import(foo)`. Because `foo` could potentially be any path to any file in your system or project.
87
89
88
-
The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included.
90
+
The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression, every module that could potentially be requested on an `import()` call is included.
91
+
89
92
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.
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.
106
+
Inline comments to make features work. By adding comments to the import, we can do things such as specify chunk name or select different loading modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do.
104
107
105
108
```js
106
109
// Single target
@@ -128,7 +131,7 @@ import(
128
131
129
132
-**Type:**`boolean`
130
133
131
-
Disables dynamic import parsing when set to true.{''}
134
+
Disables dynamic import parsing when set to true.
132
135
133
136
:::warning
134
137
Note that setting webpackIgnore to true opts out of code splitting.
@@ -137,6 +140,7 @@ Note that setting webpackIgnore to true opts out of code splitting.
Copy file name to clipboardExpand all lines: website/docs/en/api/runtime-api/module-variables.mdx
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,8 @@ import { ApiMeta } from '@components/ApiMeta';
6
6
7
7
# Module Variables
8
8
9
+
This section covers all variables available in code compiled with Rspack. Modules will be able to access specific data from the compilation process through `module` and other variables.
Copy file name to clipboardExpand all lines: website/docs/en/guide/optimization/code-splitting.mdx
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,10 +12,6 @@ Here we introduce a concept called Chunk, representing a resource that a browser
12
12
13
13
Rspack use the [import()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) syntax that conforms to the ECMAScript proposal for dynamic imports.
14
14
15
-
:::tip Inconsistent behaviors with webpack
16
-
Rspack doesn't support `require.ensure`.
17
-
:::
18
-
19
15
In `index.js`, we dynamically import two modules through `import()`, thereby separating into a new chunk.
20
16
21
17
```js title=index.js
@@ -35,6 +31,10 @@ console.log('bar.js');
35
31
36
32
Now we build this project, we get 3 chunks, `src_bar_js.js`, `src_foo_js.js` and `main.js`, if you see them, you will find `shared.js` exist in both `src_bar_js.js` and `src_foo_js.js`, we will remove duplicated modules in later chapters.
37
33
34
+
:::tip
35
+
Refer to [Module Methods - Dynamic import()](/api/runtime-api/module-methods#dynamic-import) for the detailed dynamic import API, as well as how to use dynamic expressions and magic comments in dynamic import.
36
+
:::
37
+
38
38
:::info
39
39
Though `shared.js` exist in 2 chunks, but it is executed only once, you don't have to worry about issue of multiple instance.
0 commit comments