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
Now create subdirectory `app` with an `index.js` file.
27
+
Now create a subdirectory `app` with an `index.js` file.
28
28
29
29
__app/index.js__
30
30
@@ -41,7 +41,7 @@ function component () {
41
41
document.body.appendChild(component());
42
42
```
43
43
44
-
To run this piece of code, one usually has the below html
44
+
To run this piece of code, one usually has the below HTML
45
45
46
46
__index.html__
47
47
@@ -57,15 +57,15 @@ __index.html__
57
57
</html>
58
58
```
59
59
60
-
In this example, there are implicit dependencies between the script tags.
60
+
In this example, there are implicit dependencies between the `<script>` tags.
61
61
62
62
`index.js` depends on `lodash` being included in the page before it runs. It is implicit because `index.js` never declared a need for `lodash`; it just assumes that a global variable `_` exists.
63
63
64
64
There are problems with managing JavaScript projects this way:
65
65
- If a dependency is missing, or is included in the wrong order, the application will not function at all.
66
66
- If a dependency is included but is not used, then there is a lot of unnecessary code that the browser has to download.
67
67
68
-
To bundle the `lodash` dependency with the `index.js`, we need to import `lodash`.
68
+
To bundle the `lodash` dependency with `index.js`, we need to import `lodash` from `index.js`.
69
69
70
70
__app/index.js__
71
71
@@ -76,7 +76,7 @@ function component () {
76
76
...
77
77
```
78
78
79
-
Also we will need to change the`index.html` to expect a single bundled js file.
79
+
We also need to change `index.html` to expect a single bundled js file.
80
80
81
81
```diff
82
82
<html>
@@ -95,7 +95,7 @@ Here, `index.js` explicitly requires `lodash` to be present, and binds it as `_`
95
95
96
96
By stating what dependencies a module needs, webpack can use this information to build a dependency graph. It then uses the graph to generate an optimized bundle where scripts will be executed in the correct order. Also unused dependencies will not be included in the bundle.
97
97
98
-
Now run `webpack` on this folder with the entry file to be `index.js`and to output a `bundle.js` file which bundles all the code required for the page.
98
+
Now run `webpack` on this folder with `index.js`as the entry file and `bundle.js`as the output file in which all code required for the page is bundled.
99
99
100
100
```bash
101
101
webpack app/index.js dist/bundle.js
@@ -116,8 +116,8 @@ You should see a page with the following text: 'Hello webpack'.
116
116
117
117
## Using webpack with a config
118
118
119
-
For more complex configuration, we can use a configuration file that webpack can reference to bundle your code. After you create a `webpack.config.js` file, represent the CLI command above
120
-
with the following config settings -
119
+
For a more complex configuration, we can use a configuration file that webpack can reference to bundle your code. After you create a `webpack.config.js` file, you can represent the CLI command above
120
+
with the following config settings.
121
121
122
122
__webpack.config.js__
123
123
```javascript
@@ -130,7 +130,7 @@ module.exports = {
130
130
}
131
131
```
132
132
133
-
This file can be run by webpack as
133
+
This file can be run by webpack as follows.
134
134
135
135
```bash
136
136
webpack --config webpack.config.js
@@ -170,5 +170,5 @@ T> You can pass custom parameters to webpack by adding two dashes to the `npm ru
170
170
171
171
## Conclusion
172
172
173
-
Now that you have a basic build together, you should dig into the [basic concepts](/concepts) and [configuration](/configuration) of webpack to better understand its design. Also check out the [guides](/guides) to learn how to approach common problems. The [API](/api) section digs into lower level.
173
+
Now that you have a basic build together, you should dig into the [basic concepts](/concepts) and [configuration](/configuration) of webpack to better understand its design. Also check out the [guides](/guides) to learn how to approach common problems. The [API](/api) section digs into the lower level features.
0 commit comments