Skip to content

Commit 2fa1b8c

Browse files
ItsAbir005ItsAbir005
committed
fix __dirname in esm config snippets
1 parent caf94a0 commit 2fa1b8c

11 files changed

Lines changed: 119 additions & 0 deletions

File tree

‎src/content/configuration/cache.mdx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,9 @@ Base directory for the cache. Defaults to `node_modules/.cache/webpack`.
7878

7979
```javascript
8080
import path from "node:path";
81+
import { fileURLToPath } from "node:url";
82+
const __filename = fileURLToPath(import.meta.url);
83+
const __dirname = path.dirname(__filename);
8184

8285
export default {
8386
// ...
@@ -100,6 +103,9 @@ Locations for the cache. Defaults to `path.resolve(cache.cacheDirectory, cache.n
100103
101104
```javascript
102105
import path from "node:path";
106+
import { fileURLToPath } from "node:url";
107+
const __filename = fileURLToPath(import.meta.url);
108+
const __dirname = path.dirname(__filename);
103109

104110
export default {
105111
// ...

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ This set of options is picked up by [webpack-dev-server](https://github.com/webp
4141

4242
```javascript
4343
import path from "node:path";
44+
import { fileURLToPath } from "node:url";
45+
const __filename = fileURLToPath(import.meta.url);
46+
const __dirname = path.dirname(__filename);
4447

4548
export default {
4649
// ...
@@ -877,6 +880,9 @@ You can also listen to a different socket with:
877880

878881
```javascript
879882
import path from "node:path";
883+
import { fileURLToPath } from "node:url";
884+
const __filename = fileURLToPath(import.meta.url);
885+
const __dirname = path.dirname(__filename);
880886
881887
export default {
882888
// ...
@@ -1353,6 +1359,9 @@ It also allows you to set additional [TLS options](https://nodejs.org/api/tls.ht
13531359
```javascript
13541360
import fs from "node:fs";
13551361
import path from "node:path";
1362+
import { fileURLToPath } from "node:url";
1363+
const __filename = fileURLToPath(import.meta.url);
1364+
const __dirname = path.dirname(__filename);
13561365

13571366
export default {
13581367
// ...
@@ -1522,6 +1531,9 @@ Tell the server where to serve the content from. This is only necessary if you w
15221531
15231532
```javascript
15241533
import path from "node:path";
1534+
import { fileURLToPath } from "node:url";
1535+
const __filename = fileURLToPath(import.meta.url);
1536+
const __dirname = path.dirname(__filename);
15251537

15261538
export default {
15271539
// ...
@@ -1539,6 +1551,9 @@ Provide an array of objects in case you have multiple static folders:
15391551
15401552
```javascript
15411553
import path from "node:path";
1554+
import { fileURLToPath } from "node:url";
1555+
const __filename = fileURLToPath(import.meta.url);
1556+
const __dirname = path.dirname(__filename);
15421557

15431558
export default {
15441559
// ...
@@ -1588,6 +1603,9 @@ Tell the server at which URL to serve [`static.directory`](#directory) content.
15881603
15891604
```javascript
15901605
import path from "node:path";
1606+
import { fileURLToPath } from "node:url";
1607+
const __filename = fileURLToPath(import.meta.url);
1608+
const __dirname = path.dirname(__filename);
15911609

15921610
export default {
15931611
// ...
@@ -1606,6 +1624,9 @@ Provide an array of objects in case you have multiple static folders:
16061624
16071625
```javascript
16081626
import path from "node:path";
1627+
import { fileURLToPath } from "node:url";
1628+
const __filename = fileURLToPath(import.meta.url);
1629+
const __dirname = path.dirname(__filename);
16091630

16101631
export default {
16111632
// ...
@@ -1636,6 +1657,9 @@ Tell dev-server to use [`serveIndex`](https://github.com/expressjs/serve-index)
16361657
16371658
```javascript
16381659
import path from "node:path";
1660+
import { fileURLToPath } from "node:url";
1661+
const __filename = fileURLToPath(import.meta.url);
1662+
const __dirname = path.dirname(__filename);
16391663

16401664
export default {
16411665
// ...
@@ -1670,6 +1694,9 @@ Tell dev-server to watch the files served by the [`static.directory`](#directory
16701694
16711695
```javascript
16721696
import path from "node:path";
1697+
import { fileURLToPath } from "node:url";
1698+
const __filename = fileURLToPath(import.meta.url);
1699+
const __dirname = path.dirname(__filename);
16731700

16741701
export default {
16751702
// ...
@@ -1700,6 +1727,9 @@ It is possible to configure advanced options for watching static files from [`st
17001727
17011728
```javascript
17021729
import path from "node:path";
1730+
import { fileURLToPath } from "node:url";
1731+
const __filename = fileURLToPath(import.meta.url);
1732+
const __dirname = path.dirname(__filename);
17031733

17041734
export default {
17051735
// ...

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ The base directory, an **absolute path**, for resolving entry points and loaders
2525

2626
```js
2727
import path from "node:path";
28+
import { fileURLToPath } from "node:url";
29+
const __filename = fileURLToPath(import.meta.url);
30+
const __dirname = path.dirname(__filename);
2831

2932
export default {
3033
// ...

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

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

4646
```javascript
47+
import path from "node:path";
48+
import { fileURLToPath } from "node:url";
49+
const __filename = fileURLToPath(import.meta.url);
50+
const __dirname = path.dirname(__filename);
4751
export default {
4852
extends: path.resolve(__dirname, "./base.webpack.config.js"),
4953
entry: "./src/index.js",
@@ -94,6 +98,10 @@ export default {
9498
**webpack.config.js**
9599
96100
```javascript
101+
import path from "node:path";
102+
import { fileURLToPath } from "node:url";
103+
const __filename = fileURLToPath(import.meta.url);
104+
const __dirname = path.dirname(__filename);
97105
export default {
98106
extends: [
99107
path.resolve(__dirname, "./js.webpack.config.js"),
@@ -114,6 +122,10 @@ You can override configurations from the extended configuration by passing the s
114122
**base.webpack.config.js**
115123
116124
```javascript
125+
import path from "node:path";
126+
import { fileURLToPath } from "node:url";
127+
const __filename = fileURLToPath(import.meta.url);
128+
const __dirname = path.dirname(__filename);
117129
export default {
118130
output: {
119131
path: path.resolve(__dirname, "dist"),
@@ -125,6 +137,10 @@ export default {
125137
**webpack.config.js**
126138
127139
```javascript
140+
import path from "node:path";
141+
import { fileURLToPath } from "node:url";
142+
const __filename = fileURLToPath(import.meta.url);
143+
const __dirname = path.dirname(__filename);
128144
export default {
129145
extends: path.resolve(__dirname, "./base.webpack.config.js"),
130146
entry: "./src/index.js",
@@ -167,6 +183,9 @@ export default {
167183
```javascript
168184
import path from "node:path";
169185
import webpack from "webpack";
186+
import { fileURLToPath } from "node:url";
187+
const __filename = fileURLToPath(import.meta.url);
188+
const __dirname = path.dirname(__filename);
170189

171190
export default {
172191
extends: path.resolve(__dirname, "./base.webpack.config.js"),
@@ -227,6 +246,10 @@ You can also load configuration from third-party packages by passing the package
227246
**webpack.config.js**
228247
229248
```javascript
249+
import path from "node:path";
250+
import { fileURLToPath } from "node:url";
251+
const __filename = fileURLToPath(import.meta.url);
252+
const __dirname = path.dirname(__filename);
230253
export default {
231254
extends: require.resolve("webpack-config-foo"),
232255
entry: "./src/index.js",

‎src/content/configuration/module.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1396,6 +1396,10 @@ 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+
import path from "node:path";
1400+
import { fileURLToPath } from "node:url";
1401+
const __filename = fileURLToPath(import.meta.url);
1402+
const __dirname = path.dirname(__filename);
13991403
export default {
14001404
// ...
14011405
module: {
@@ -2024,6 +2028,9 @@ Conditions can be one of these:
20242028
20252029
```javascript
20262030
import path from "node:path";
2031+
import { fileURLToPath } from "node:url";
2032+
const __filename = fileURLToPath(import.meta.url);
2033+
const __dirname = path.dirname(__filename);
20272034

20282035
export default {
20292036
// ...

‎src/content/configuration/node.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ W> As of webpack 5, You can configure only `global`, `__filename`/`import.meta.f
2626
**webpack.config.js**
2727

2828
```javascript
29+
import path from "node:path";
30+
import { fileURLToPath } from "node:url";
31+
const __filename = fileURLToPath(import.meta.url);
32+
const __dirname = path.dirname(__filename);
2933
export default {
3034
// ...
3135
node: {

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

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

207207
```javascript
208208
import path from "node:path";
209+
import { fileURLToPath } from "node:url";
210+
const __filename = fileURLToPath(import.meta.url);
211+
const __dirname = path.dirname(__filename);
209212

210213
export default {
211214
// ...
@@ -224,6 +227,9 @@ Use this option to generate a JSON file containing webpack "records" – pieces
224227
225228
```javascript
226229
import path from "node:path";
230+
import { fileURLToPath } from "node:url";
231+
const __filename = fileURLToPath(import.meta.url);
232+
const __dirname = path.dirname(__filename);
227233

228234
export default {
229235
// ...
@@ -247,6 +253,9 @@ W> Setting `recordsPath` will essentially set `recordsInputPath` and `recordsOut
247253
248254
```javascript
249255
import path from "node:path";
256+
import { fileURLToPath } from "node:url";
257+
const __filename = fileURLToPath(import.meta.url);
258+
const __dirname = path.dirname(__filename);
250259

251260
export default {
252261
// ...

‎src/content/configuration/output.mdx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2153,6 +2153,9 @@ The output directory as an **absolute** path.
21532153

21542154
```javascript
21552155
import path from "node:path";
2156+
import { fileURLToPath } from "node:url";
2157+
const __filename = fileURLToPath(import.meta.url);
2158+
const __dirname = path.dirname(__filename);
21562159

21572160
export default {
21582161
// ...
@@ -2207,6 +2210,9 @@ A rule to consider: The URL of your [`output.path`](#outputpath) from the view o
22072210

22082211
```javascript
22092212
import path from "node:path";
2213+
import { fileURLToPath } from "node:url";
2214+
const __filename = fileURLToPath(import.meta.url);
2215+
const __dirname = path.dirname(__filename);
22102216

22112217
export default {
22122218
// ...

‎src/content/configuration/resolve.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ Create aliases to `import` or `require` certain modules more easily. For example
5252

5353
```js
5454
import path from "node:path";
55+
import { fileURLToPath } from "node:url";
56+
const __filename = fileURLToPath(import.meta.url);
57+
const __dirname = path.dirname(__filename);
5558

5659
export default {
5760
// ...
@@ -82,6 +85,9 @@ A trailing `$` can also be added to the given object's keys to signify an exact
8285
8386
```js
8487
import path from "node:path";
88+
import { fileURLToPath } from "node:url";
89+
const __filename = fileURLToPath(import.meta.url);
90+
const __dirname = path.dirname(__filename);
8591

8692
export default {
8793
// ...
@@ -105,6 +111,10 @@ You can also use wildcards (`*`) in your alias configuration to create more flex
105111
**webpack.config.js**
106112
107113
```js
114+
import path from "node:path";
115+
import { fileURLToPath } from "node:url";
116+
const __filename = fileURLToPath(import.meta.url);
117+
const __dirname = path.dirname(__filename);
108118
export default {
109119
// ...
110120
resolve: {
@@ -151,6 +161,10 @@ W> [`null-loader`](https://github.com/webpack-contrib/null-loader) is deprecated
151161
W> `[string]` values are supported since webpack 5.
152162
153163
```js
164+
import path from "node:path";
165+
import { fileURLToPath } from "node:url";
166+
const __filename = fileURLToPath(import.meta.url);
167+
const __dirname = path.dirname(__filename);
154168
export default {
155169
// ...
156170
resolve: {
@@ -469,6 +483,10 @@ Redirect module requests when normal resolving fails.
469483
**webpack.config.js**
470484
471485
```js
486+
import path from "node:path";
487+
import { fileURLToPath } from "node:url";
488+
const __filename = fileURLToPath(import.meta.url);
489+
const __dirname = path.dirname(__filename);
472490
export default {
473491
// ...
474492
resolve: {
@@ -638,6 +656,9 @@ If you want to add a directory to search in that takes precedence over `node_mod
638656
639657
```js
640658
import path from "node:path";
659+
import { fileURLToPath } from "node:url";
660+
const __filename = fileURLToPath(import.meta.url);
661+
const __dirname = path.dirname(__filename);
641662

642663
export default {
643664
// ...
@@ -759,6 +780,10 @@ A list of directories where requests of server-relative URLs (starting with '/')
759780
**webpack.config.js**
760781
761782
```js
783+
import path from "node:path";
784+
import { fileURLToPath } from "node:url";
785+
const __filename = fileURLToPath(import.meta.url);
786+
const __dirname = path.dirname(__filename);
762787
const fixtures = path.resolve(__dirname, "fixtures");
763788

764789
export default {

‎src/content/configuration/stats.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,9 @@ The stats base directory, an **absolute path** for shortening the request inform
371371

372372
```javascript
373373
import path from "node:path";
374+
import { fileURLToPath } from "node:url";
375+
const __filename = fileURLToPath(import.meta.url);
376+
const __dirname = path.dirname(__filename);
374377

375378
export default {
376379
// ...

0 commit comments

Comments
 (0)