Skip to content

Commit caf94a0

Browse files
ItsAbir005ItsAbir005
committed
restore esm syntax in dirname examples
1 parent a126416 commit caf94a0

12 files changed

Lines changed: 65 additions & 67 deletions

‎src/content/configuration/cache.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,9 @@ Base directory for the cache. Defaults to `node_modules/.cache/webpack`.
7777
**webpack.config.js**
7878

7979
```javascript
80-
const path = require("node:path");
80+
import path from "node:path";
8181

82-
module.exports = {
82+
export default {
8383
// ...
8484
cache: {
8585
type: "filesystem",
@@ -99,9 +99,9 @@ Locations for the cache. Defaults to `path.resolve(cache.cacheDirectory, cache.n
9999
**webpack.config.js**
100100

101101
```javascript
102-
const path = require("node:path");
102+
import path from "node:path";
103103

104-
module.exports = {
104+
export default {
105105
// ...
106106
cache: {
107107
type: "filesystem",

‎src/content/configuration/configuration-languages.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ and then proceed to write your configuration:
3434
**webpack.config.ts**
3535

3636
```typescript
37-
const path = require("path");
38-
const webpack = require("webpack");
37+
import path from "path";
38+
import webpack from "webpack";
3939
// in case you run into any typescript error when configuring `devServer`
4040
import "webpack-dev-server";
4141

‎src/content/configuration/dev-server.mdx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@ This set of options is picked up by [webpack-dev-server](https://github.com/webp
4040
**webpack.config.js**
4141

4242
```javascript
43-
const path = require("node:path");
43+
import path from "node:path";
4444

45-
module.exports = {
45+
export default {
4646
// ...
4747
devServer: {
4848
static: {
@@ -876,9 +876,9 @@ You can also listen to a different socket with:
876876
**webpack.config.js**
877877

878878
```javascript
879-
const path = require("node:path");
879+
import path from "node:path";
880880

881-
module.exports = {
881+
export default {
882882
// ...
883883
devServer: {
884884
ipc: path.join(__dirname, "my-socket.sock"),
@@ -1351,10 +1351,10 @@ It also allows you to set additional [TLS options](https://nodejs.org/api/tls.ht
13511351
**webpack.config.js**
13521352

13531353
```javascript
1354-
const fs = require("node:fs");
1355-
const path = require("node:path");
1354+
import fs from "node:fs";
1355+
import path from "node:path";
13561356

1357-
module.exports = {
1357+
export default {
13581358
// ...
13591359
devServer: {
13601360
server: {
@@ -1521,9 +1521,9 @@ Tell the server where to serve the content from. This is only necessary if you w
15211521
**webpack.config.js**
15221522

15231523
```javascript
1524-
const path = require("node:path");
1524+
import path from "node:path";
15251525

1526-
module.exports = {
1526+
export default {
15271527
// ...
15281528
devServer: {
15291529
static: {
@@ -1538,9 +1538,9 @@ Provide an array of objects in case you have multiple static folders:
15381538
**webpack.config.js**
15391539

15401540
```javascript
1541-
const path = require("node:path");
1541+
import path from "node:path";
15421542

1543-
module.exports = {
1543+
export default {
15441544
// ...
15451545
devServer: {
15461546
static: [
@@ -1587,9 +1587,9 @@ Tell the server at which URL to serve [`static.directory`](#directory) content.
15871587
**webpack.config.js**
15881588

15891589
```javascript
1590-
const path = require("node:path");
1590+
import path from "node:path";
15911591

1592-
module.exports = {
1592+
export default {
15931593
// ...
15941594
devServer: {
15951595
static: {
@@ -1605,9 +1605,9 @@ Provide an array of objects in case you have multiple static folders:
16051605
**webpack.config.js**
16061606

16071607
```javascript
1608-
const path = require("node:path");
1608+
import path from "node:path";
16091609

1610-
module.exports = {
1610+
export default {
16111611
// ...
16121612
devServer: {
16131613
static: [
@@ -1635,9 +1635,9 @@ Tell dev-server to use [`serveIndex`](https://github.com/expressjs/serve-index)
16351635
**webpack.config.js**
16361636

16371637
```javascript
1638-
const path = require("node:path");
1638+
import path from "node:path";
16391639

1640-
module.exports = {
1640+
export default {
16411641
// ...
16421642
devServer: {
16431643
static: {
@@ -1669,9 +1669,9 @@ Tell dev-server to watch the files served by the [`static.directory`](#directory
16691669
**webpack.config.js**
16701670

16711671
```javascript
1672-
const path = require("node:path");
1672+
import path from "node:path";
16731673

1674-
module.exports = {
1674+
export default {
16751675
// ...
16761676
devServer: {
16771677
static: {
@@ -1699,9 +1699,9 @@ It is possible to configure advanced options for watching static files from [`st
16991699
**webpack.config.js**
17001700

17011701
```javascript
1702-
const path = require("node:path");
1702+
import path from "node:path";
17031703

1704-
module.exports = {
1704+
export default {
17051705
// ...
17061706
devServer: {
17071707
static: {

‎src/content/configuration/entry-context.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ The entry object is where webpack looks to start building the bundle. The contex
2424
The base directory, an **absolute path**, for resolving entry points and loaders from the configuration.
2525

2626
```js
27-
const path = require("node:path");
27+
import path from "node:path";
2828

29-
module.exports = {
29+
export default {
3030
// ...
3131
context: path.resolve(__dirname, "app"),
3232
};

‎src/content/configuration/extending-configurations.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default {
4444
**webpack.config.js**
4545

4646
```javascript
47-
module.exports = {
47+
export default {
4848
extends: path.resolve(__dirname, "./base.webpack.config.js"),
4949
entry: "./src/index.js",
5050
output: {
@@ -94,7 +94,7 @@ export default {
9494
**webpack.config.js**
9595

9696
```javascript
97-
module.exports = {
97+
export default {
9898
extends: [
9999
path.resolve(__dirname, "./js.webpack.config.js"),
100100
path.resolve(__dirname, "./css.webpack.config.js"),
@@ -114,7 +114,7 @@ You can override configurations from the extended configuration by passing the s
114114
**base.webpack.config.js**
115115

116116
```javascript
117-
module.exports = {
117+
export default {
118118
output: {
119119
path: path.resolve(__dirname, "dist"),
120120
filename: "bundle.js",
@@ -125,7 +125,7 @@ module.exports = {
125125
**webpack.config.js**
126126

127127
```javascript
128-
module.exports = {
128+
export default {
129129
extends: path.resolve(__dirname, "./base.webpack.config.js"),
130130
entry: "./src/index.js",
131131
// overriding the output path and filename
@@ -165,10 +165,10 @@ export default {
165165
**webpack.config.js**
166166

167167
```javascript
168-
const path = require("node:path");
169-
const webpack = require("webpack");
168+
import path from "node:path";
169+
import webpack from "webpack";
170170

171-
module.exports = {
171+
export default {
172172
extends: path.resolve(__dirname, "./base.webpack.config.js"),
173173

174174
module: {
@@ -227,7 +227,7 @@ You can also load configuration from third-party packages by passing the package
227227
**webpack.config.js**
228228

229229
```javascript
230-
module.exports = {
230+
export default {
231231
extends: require.resolve("webpack-config-foo"),
232232
entry: "./src/index.js",
233233
output: {

‎src/content/configuration/module.mdx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1396,7 +1396,7 @@ However, parser plugins may accept more than only a boolean. For example, the in
13961396
**Examples** (parser options by the default plugins):
13971397

13981398
```js
1399-
module.exports = {
1399+
export default {
14001400
// ...
14011401
module: {
14021402
rules: [
@@ -2023,9 +2023,9 @@ Conditions can be one of these:
20232023
**Example:**
20242024

20252025
```javascript
2026-
const path = require("node:path");
2026+
import path from "node:path";
20272027

2028-
module.exports = {
2028+
export default {
20292029
// ...
20302030
module: {
20312031
rules: [
@@ -2160,4 +2160,3 @@ A few use cases:
21602160
- Set the inner regular expression for partial dynamic dependencies : `wrappedContextRegExp: /\\.\\*/`
21612161

21622162
W> `strictExportPresence` is deprecated in favor of [`exportsPresence`](#moduleparserjavascriptexportspresence) option.
2163-

‎src/content/configuration/node.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ W> As of webpack 5, You can configure only `global`, `__filename`/`import.meta.f
2626
**webpack.config.js**
2727

2828
```javascript
29-
module.exports = {
29+
export default {
3030
// ...
3131
node: {
3232
global: false,

‎src/content/configuration/other-options.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -205,9 +205,9 @@ Specify where the records should be written. The following example shows how you
205205
**webpack.config.js**
206206

207207
```javascript
208-
const path = require("node:path");
208+
import path from "node:path";
209209

210-
module.exports = {
210+
export default {
211211
// ...
212212
recordsInputPath: path.join(__dirname, "records.json"),
213213
recordsOutputPath: path.join(__dirname, "newRecords.json"),
@@ -223,9 +223,9 @@ Use this option to generate a JSON file containing webpack "records" – pieces
223223
**webpack.config.js**
224224

225225
```javascript
226-
const path = require("node:path");
226+
import path from "node:path";
227227

228-
module.exports = {
228+
export default {
229229
// ...
230230
recordsPath: path.join(__dirname, "records.json"),
231231
};
@@ -246,9 +246,9 @@ W> Setting `recordsPath` will essentially set `recordsInputPath` and `recordsOut
246246
**webpack.config.js**
247247

248248
```javascript
249-
const path = require("node:path");
249+
import path from "node:path";
250250

251-
module.exports = {
251+
export default {
252252
// ...
253253
snapshot: {
254254
managedPaths: [path.resolve(__dirname, "../node_modules")],

‎src/content/configuration/output.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2152,9 +2152,9 @@ The output directory as an **absolute** path.
21522152
**webpack.config.js**
21532153

21542154
```javascript
2155-
const path = require("node:path");
2155+
import path from "node:path";
21562156

2157-
module.exports = {
2157+
export default {
21582158
// ...
21592159
output: {
21602160
path: path.resolve(__dirname, "dist/assets"),
@@ -2206,9 +2206,9 @@ A rule to consider: The URL of your [`output.path`](#outputpath) from the view o
22062206
**webpack.config.js**
22072207

22082208
```javascript
2209-
const path = require("node:path");
2209+
import path from "node:path";
22102210

2211-
module.exports = {
2211+
export default {
22122212
// ...
22132213
output: {
22142214
path: path.resolve(__dirname, "public/assets"),

‎src/content/configuration/resolve.mdx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,9 @@ Create aliases to `import` or `require` certain modules more easily. For example
5151
**webpack.config.js**
5252

5353
```js
54-
const path = require("node:path");
54+
import path from "node:path";
5555

56-
module.exports = {
56+
export default {
5757
// ...
5858
resolve: {
5959
alias: {
@@ -81,9 +81,9 @@ A trailing `$` can also be added to the given object's keys to signify an exact
8181
**webpack.config.js**
8282

8383
```js
84-
const path = require("node:path");
84+
import path from "node:path";
8585

86-
module.exports = {
86+
export default {
8787
// ...
8888
resolve: {
8989
alias: {
@@ -105,7 +105,7 @@ You can also use wildcards (`*`) in your alias configuration to create more flex
105105
**webpack.config.js**
106106

107107
```js
108-
module.exports = {
108+
export default {
109109
// ...
110110
resolve: {
111111
alias: {
@@ -151,7 +151,7 @@ W> [`null-loader`](https://github.com/webpack-contrib/null-loader) is deprecated
151151
W> `[string]` values are supported since webpack 5.
152152

153153
```js
154-
module.exports = {
154+
export default {
155155
// ...
156156
resolve: {
157157
alias: {
@@ -469,7 +469,7 @@ Redirect module requests when normal resolving fails.
469469
**webpack.config.js**
470470

471471
```js
472-
module.exports = {
472+
export default {
473473
// ...
474474
resolve: {
475475
fallback: {
@@ -637,9 +637,9 @@ If you want to add a directory to search in that takes precedence over `node_mod
637637
**webpack.config.js**
638638

639639
```js
640-
const path = require("node:path");
640+
import path from "node:path";
641641

642-
module.exports = {
642+
export default {
643643
// ...
644644
resolve: {
645645
modules: [path.resolve(__dirname, "src"), "node_modules"],
@@ -761,7 +761,7 @@ A list of directories where requests of server-relative URLs (starting with '/')
761761
```js
762762
const fixtures = path.resolve(__dirname, "fixtures");
763763

764-
module.exports = {
764+
export default {
765765
// ...
766766
resolve: {
767767
roots: [__dirname, fixtures],
@@ -957,4 +957,3 @@ export default {
957957
```
958958
959959
T> Note that you can use alias here and other features familiar from resolve. For example `{ txt: 'raw-loader' }` would shim `txt!templates/demo.txt` to use `raw-loader`.
960-

0 commit comments

Comments
 (0)