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
docs(concepts) Use common formatting, provide more links, mention mod... (#2472)
* docs(concepts) use common formatting, provide more links, mention mode in core of the concepts
* docs(concepts) duplicate links on the list for better ux
* docs(concepts) forgot to add EugeneHlushko to contributors
Copy file name to clipboardExpand all lines: src/content/concepts/index.md
+17-15Lines changed: 17 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,22 +14,24 @@ contributors:
14
14
- arjunsajeev
15
15
- byzyk
16
16
- yairhaimo
17
+
- EugeneHlushko
17
18
---
18
19
19
-
At its core, **webpack** is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a _dependency graph_ which maps every module your project needs and generates one or more _bundles_.
20
+
At its core, __webpack__ is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph](/concepts/dependency-graph/) which maps every module your project needs and generates one or more _bundles_.
20
21
21
22
T> Learn more about JavaScript modules and webpack modules [here](/concepts/modules).
22
23
23
-
Since version 4.0.0, **webpack does not require a configuration file** to bundle your project, nevertheless it is [incredibly configurable](/configuration) to better fit your needs.
24
+
Since version 4.0.0, __webpack does not require a configuration file__ to bundle your project, nevertheless it is [incredibly configurable](/configuration) to better fit your needs.
24
25
25
-
To get started you only need to understand its **Core Concepts**:
26
+
To get started you only need to understand its __Core Concepts__:
26
27
27
-
- Entry
28
-
- Output
29
-
- Loaders
30
-
- Plugins
28
+
-[Entry](#entry)
29
+
-[Output](#output)
30
+
-[Loaders](#loaders)
31
+
-[Plugins](#plugins)
32
+
-[Mode](#mode)
31
33
32
-
This document is intended to give a **high-level** overview of these concepts, while providing links to detailed concept specific use cases.
34
+
This document is intended to give a __high-level__ overview of these concepts, while providing links to detailed concept specific use cases.
33
35
34
36
For a better understanding of the ideas behind module bundlers and how they work under the hood consult these resources:
35
37
@@ -40,9 +42,9 @@ For a better understanding of the ideas behind module bundlers and how they work
40
42
41
43
## Entry
42
44
43
-
An **entry point** indicates which module webpack should use to begin building out its internal *dependency graph*. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).
45
+
An __entry point__ indicates which module webpack should use to begin building out its internal [dependency graph](/concepts/dependency-graph/). webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).
44
46
45
-
By default its value is `./src/index.js`, but you can specify a different (or multiple entry points) by configuring the **entry** property in the [webpack configuration](/configuration). For example:
47
+
By default its value is `./src/index.js`, but you can specify a different (or multiple entry points) by configuring the __entry__ property in the [webpack configuration](/configuration). For example:
46
48
47
49
__webpack.config.js__
48
50
@@ -57,7 +59,7 @@ T> Learn more in the [entry points](/concepts/entry-points) section.
57
59
58
60
## Output
59
61
60
-
The **output** property tells webpack where to emit the *bundles* it creates and how to name these files. It defaults to `./dist/main.js` for the main output file and to the `./dist` folder for any other generated file.
62
+
The __output__ property tells webpack where to emit the *bundles* it creates and how to name these files. It defaults to `./dist/main.js` for the main output file and to the `./dist` folder for any other generated file.
61
63
62
64
You can configure this part of the process by specifying an `output` field in your configuration:
63
65
@@ -82,11 +84,11 @@ T> The `output` property has [many more configurable features](/configuration/ou
82
84
83
85
## Loaders
84
86
85
-
Out of the box, webpack only understands JavaScript files. **Loaders** allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph.
87
+
Out of the box, webpack only understands JavaScript files. __Loaders__ allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph.
86
88
87
89
W> Note that the ability to `import` any type of module, e.g. `.css` files, is a feature specific to webpack and may not be supported by other bundlers or task runners. We feel this extension of the language is warranted as it allows developers to build a more accurate dependency graph.
88
90
89
-
At a high level, **loaders** have two properties in your webpack configuration:
91
+
At a high level, __loaders__ have two properties in your webpack configuration:
90
92
91
93
1. The `test` property identifies which file or files should be transformed.
92
94
2. The `use` property indicates which loader should be used to do the transforming.
@@ -110,7 +112,7 @@ module.exports = {
110
112
111
113
The configuration above has defined a `rules` property for a single module with two required properties: `test` and `use`. This tells webpack's compiler the following:
112
114
113
-
> "Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a `require()`/`import` statement, **use** the `raw-loader` to transform it before you add it to the bundle."
115
+
> "Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a `require()`/`import` statement, __use__ the `raw-loader` to transform it before you add it to the bundle."
114
116
115
117
W> It is important to remember that when defining rules in your webpack config, you are defining them under `module.rules` and not `rules`. For your benefit, webpack will warn you if this is done incorrectly.
116
118
@@ -125,7 +127,7 @@ T> Check out the [plugin interface](/api/plugins) and how to use it to extend we
125
127
126
128
In order to use a plugin, you need to `require()` it and add it to the `plugins` array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the `new` operator.
127
129
128
-
**webpack.config.js**
130
+
__webpack.config.js__
129
131
130
132
```javascript
131
133
constHtmlWebpackPlugin=require('html-webpack-plugin'); //installed via npm
0 commit comments