Skip to content

Commit 81afd9c

Browse files
DeekshaVarshney123DeekshaVarshney123
committed
docs: Update Asset Management guide to ES Modules syntax, and fix package.json formatting
1 parent 51ea1c3 commit 81afd9c

File tree

16 files changed

+52
-14473
lines changed

16 files changed

+52
-14473
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"cypress:open": "cypress open",
5959
"cypress:run": "cypress run --browser chrome",
6060
"prettier": "prettier --write '**/*.{js,json,jsx,css,scss,md,mdx}'",
61-
"prepare": "husky && rimraf ./node_modules/.cache/webpack && yarn-deduplicate --strategy fewer"
61+
"prepare": "husky && rimraf ./node_modules/.cache/webpack"
6262
},
6363
"lint-staged": {
6464
"*.{js,mjs,jsx,md,mdx}": [

‎src/components/Footer/Footer.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@ const Footer = () => (
3939
<Link className="footer__link" to="/branding/">
4040
Branding
4141
</Link>
42-
<Link className="footer__link" to="https://discord.com/invite/5sxFZPdx2k">
42+
<Link
43+
className="footer__link"
44+
to="https://discord.com/invite/5sxFZPdx2k"
45+
>
4346
Discord
4447
</Link>
4548
<Link

‎src/content/api/module-variables.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -265,14 +265,12 @@ In modules, `__webpack_exports_info__` is available to allow exports introspecti
265265
- `__webpack_exports_info__.<exportName>.used` is `false` when the export is known to be unused, `true` otherwise
266266
267267
- `__webpack_exports_info__.<exportName>.useInfo` is
268-
269268
- `false` when the export is known to be unused
270269
- `true` when the export is known to be used
271270
- `null` when the export usage could depend on runtime conditions
272271
- `undefined` when no info is available
273272
274273
- `__webpack_exports_info__.<exportName>.provideInfo` is
275-
276274
- `false` when the export is known to be not provided
277275
- `true` when the export is known to be provided
278276
- `null` when the export provision could depend on runtime conditions

‎src/content/comparison.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ Webpack is not the only module bundler out there. If you are choosing between us
2626
| CommonJS `exports` | **yes** | only wrapping in `define` | **yes** | yes | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | yes |
2727
| CommonJS `require` | **yes** | only wrapping in `define` | **yes** | yes | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | yes |
2828
| CommonJS `require.resolve` | **yes** | no | no | no | no | |
29-
| Concat in require `require("./fi" + "le")` | **yes** | no♦ | no | no | no | |
29+
| Concat in require `require("./fi" + "le")` | **yes** | no♦ | no | no | no | |
3030
| Debugging support | **SourceUrl, SourceMaps** | not required | SourceMaps | **SourceUrl, SourceMaps** | **SourceUrl, SourceMaps** | SourceMaps |
3131
| Dependencies | 19MB / 127 packages | 11MB / 118 packages | **1.2MB / 1 package** | 26MB / 131 packages | ?MB / 3 packages | |
3232
| ES2015 `import`/`export` | **yes** (webpack 2) | no | no | **yes** | **yes** | yes, via [es6 module transpiler](https://github.com/gcollazo/es6-module-transpiler-brunch) |
33-
| Expressions in require (guided) `require("./templates/" + template)` | **yes (all files matching included)** | no♦ | no | no | no | no |
34-
| Expressions in require (free) `require(moduleName)` | with manual configuration | no♦ | no | no | no | |
35-
| Generate a single bundle | **yes** | yes♦ | yes | yes | yes | yes |
36-
| Indirect require `var r = require; r("./file")` | **yes** | no♦ | no | no | no | |
33+
| Expressions in require (guided) `require("./templates/" + template)` | **yes (all files matching included)** | no♦ | no | no | no | no |
34+
| Expressions in require (free) `require(moduleName)` | with manual configuration | no♦ | no | no | no | |
35+
| Generate a single bundle | **yes** | yes♦ | yes | yes | yes | yes |
36+
| Indirect require `var r = require; r("./file")` | **yes** | no♦ | no | no | no | |
3737
| Load each file separate | no | yes | no | yes | no | no |
3838
| Mangle path names | **yes** | no | partial | yes | not required (path names are not included in the bundle) | no |
3939
| Minimizing | [Terser](https://github.com/fabiosantoscode/terser) | uglify, closure compiler | [uglifyify](https://github.com/hughsk/uglifyify) | yes | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify) | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch) |

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ There are three solutions to this issue:
7272
- Modify `tsconfig.json` and add settings for `ts-node`.
7373
- Install `tsconfig-paths`.
7474

75-
7675
The **first option** is to open your `tsconfig.json` file and look for `compilerOptions`. Set `target` to `"ES5"` and `module` to `"CommonJS"` (or completely remove the `module` option).
7776

7877
The **second option** is to add settings for ts-node:
@@ -82,7 +81,7 @@ You can keep `"module": "ESNext"` for `tsc`, and if you use webpack, or another
8281
```json
8382
{
8483
"compilerOptions": {
85-
"module": "ESNext",
84+
"module": "ESNext"
8685
},
8786
"ts-node": {
8887
"compilerOptions": {

‎src/content/configuration/experiments.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ module.exports = {
6969
When enabled, webpack can build remote resources that begin with the `http(s):` protocol.
7070

7171
- Type:
72-
7372
- `(string | RegExp | ((uri: string) => boolean))[]`
7473

7574
A shortcut for [`experiments.buildHttp.allowedUris`](#experimentsbuildhttpalloweduris).
@@ -278,7 +277,6 @@ module.exports = {
278277
Compile entrypoints and dynamic `import`s only when they are in use. It can be used for either Web or Node.js.
279278

280279
- Type
281-
282280
- `boolean`
283281
- `object`
284282

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,6 @@ Snapshots for building context modules.
350350
- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often).
351351
- `timestamp`: Compare timestamps to determine invalidation.
352352

353-
354353
### resolve
355354

356355
`object = {hash boolean = true, timestamp boolean = true}`

‎src/content/configuration/output.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2158,7 +2158,6 @@ T> It also adds some info about tree shaking to the generated bundle.
21582158
## output.publicPath
21592159

21602160
- Type:
2161-
21622161
- `function`
21632162
- `string`
21642163

‎src/content/contribute/writing-a-plugin.mdx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -314,21 +314,18 @@ Various types of hooks supported are :
314314
### Synchronous Hooks
315315

316316
- **SyncHook**
317-
318317
- Defined as `new SyncHook([params])`
319318
- Tapped into using `tap` method.
320319
- Called using `call(...params)` method.
321320

322321
- **Bail Hooks**
323-
324322
- Defined using `SyncBailHook[params]`
325323
- Tapped into using `tap` method.
326324
- Called using `call(...params)` method.
327325

328326
In these types of hooks, each of the plugin callbacks will be invoked one after the other with the specific `args`. If any value is returned except undefined by any plugin, then that value is returned by hook and no further plugin callback is invoked. Many useful events like `optimizeChunks`, `optimizeChunkModules` are SyncBailHooks.
329327

330328
- **Waterfall Hooks**
331-
332329
- Defined using `SyncWaterfallHook[params]`
333330
- Tapped into using `tap` method.
334331
- Called using `call(...params)` method
@@ -339,7 +336,6 @@ Various types of hooks supported are :
339336
### Asynchronous Hooks
340337

341338
- **Async Series Hook**
342-
343339
- Defined using `AsyncSeriesHook[params]`
344340
- Tapped into using `tap`/`tapAsync`/`tapPromise` method.
345341
- Called using `callAsync(...params)` method
@@ -348,7 +344,6 @@ Various types of hooks supported are :
348344
This is also a commonly used pattern for events like `emit`, `run`.
349345

350346
- **Async waterfall** The plugins will be applied asynchronously in the waterfall manner.
351-
352347
- Defined using `AsyncWaterfallHook[params]`
353348
- Tapped into using `tap`/`tapAsync`/`tapPromise` method.
354349
- Called using `callAsync(...params)` method
@@ -357,13 +352,11 @@ Various types of hooks supported are :
357352
This plugin pattern is expected for events like `before-resolve` and `after-resolve`.
358353

359354
- **Async Series Bail**
360-
361355
- Defined using `AsyncSeriesBailHook[params]`
362356
- Tapped into using `tap`/`tapAsync`/`tapPromise` method.
363357
- Called using `callAsync(...params)` method
364358

365359
- **Async Parallel**
366-
367360
- Defined using `AsyncParallelHook[params]`
368361
- Tapped into using `tap`/`tapAsync`/`tapPromise` method.
369362
- Called using `callAsync(...params)` method

‎src/content/guides/asset-management.mdx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ Let's make a minor change to our project before we get started:
4444
**webpack.config.js**
4545

4646
```diff
47-
const path = require('path');
47+
import path from 'path';
4848

49-
module.exports = {
49+
export default {
5050
entry: './src/index.js',
5151
output: {
5252
- filename: 'main.js',
@@ -67,9 +67,9 @@ npm install --save-dev style-loader css-loader
6767
**webpack.config.js**
6868

6969
```diff
70-
const path = require('path');
70+
import path from 'path';
7171

72-
module.exports = {
72+
export default {
7373
entry: './src/index.js',
7474
output: {
7575
filename: 'bundle.js',
@@ -171,9 +171,9 @@ So now we're pulling in our CSS, but what about our images like backgrounds and
171171
**webpack.config.js**
172172

173173
```diff
174-
const path = require('path');
174+
import path from 'path';
175175

176-
module.exports = {
176+
export default {
177177
entry: './src/index.js',
178178
output: {
179179
filename: 'bundle.js',
@@ -284,9 +284,9 @@ So what about other assets like fonts? The Asset Modules will take any file you
284284
**webpack.config.js**
285285

286286
```diff
287-
const path = require('path');
287+
import path from 'path';
288288

289-
module.exports = {
289+
export default {
290290
entry: './src/index.js',
291291
output: {
292292
filename: 'bundle.js',
@@ -395,9 +395,9 @@ npm install --save-dev csv-loader xml-loader
395395
**webpack.config.js**
396396

397397
```diff
398-
const path = require('path');
398+
import path from 'path';
399399

400-
module.exports = {
400+
export default {
401401
entry: './src/index.js',
402402
output: {
403403
filename: 'bundle.js',
@@ -579,12 +579,12 @@ And configure them in your webpack configuration:
579579
**webpack.config.js**
580580

581581
```diff
582-
const path = require('path');
583-
+const toml = require('toml');
584-
+const yaml = require('yamljs');
585-
+const json5 = require('json5');
582+
import path from 'path';
583+
+import toml from 'toml';
584+
+import yaml from 'yamljs';
585+
+import json5 from 'json5';
586586

587-
module.exports = {
587+
export default {
588588
entry: './src/index.js',
589589
output: {
590590
filename: 'bundle.js',
@@ -732,12 +732,12 @@ For the next guides we won't be using all the different assets we've used in thi
732732
**webpack.config.js**
733733

734734
```diff
735-
const path = require('path');
736-
-const toml = require('toml');
737-
-const yaml = require('yamljs');
738-
-const json5 = require('json5');
735+
import path from 'path';
736+
-import toml from 'toml';
737+
-import yaml from 'yamljs';
738+
-import json5 from 'json5';
739739

740-
module.exports = {
740+
export default {
741741
entry: './src/index.js',
742742
output: {
743743
filename: 'bundle.js',

0 commit comments

Comments
 (0)