Skip to content

Commit 54b5b4c

Browse files
rxcsmontogeek
authored andcommitted
docs(concepts): Update why-webpack.md (#2729)
* Update why-webpack.md Revisions for smoother reading * Update why-webpack.md * Update why-webpack.md
1 parent 8faaa54 commit 54b5b4c

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/content/concepts/why-webpack.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@ contributors:
88
- EugeneHlushko
99
---
1010

11-
To understand why you should use webpack let's do a recap of how we used JavaScript on the web before bundlers were a thing.
11+
To understand why you should use webpack let's recap how we used JavaScript on the web before bundlers were a thing.
1212

13-
There are two ways to run JavaScript in a browser. First, include a script for each functionality you want to implement, the issue is that the solution is hard to scale as loading too many scripts causes a network bottleneck. The other alternative is to load a big .js file containing all your project code, but this results in an unmaintainable scripts that causes problems in scope, size, readability, fragility and monolith files.
13+
There are two ways to run JavaScript in a browser. First, include a script for each functionality; this solution is hard to scale because loading too many scripts can cause a network bottleneck. The second option is to use a big `.js` file containing all your project code, but this leads to problems in scope, size, readability and maintainability.
1414

1515

1616
## IIFE's - Immediately invoked function expressions
1717

18-
IIFEs solve scoping issues for large projects. When script files are wrapped by an IIFE, you can safely concatenate or safely combine files without concern of scope collision.
18+
IIFEs solve scoping issues for large projects; when script files are wrapped by an IIFE, you can safely concatenate or safely combine files without worrying about scope collision.
1919

20-
This lead to tools like Make, Gulp, Grunt, Broccoli or Brunch. These tools are known as task runners and they are used, among other purposes, to concatenate all your project files together in order to solve some of the issues mentioned before.
20+
This lead to tools like Make, Gulp, Grunt, Broccoli or Brunch. These tools are known as task runners and they concatenate all your project files together.
2121

22-
However, anytime you want to change one file you have to rebuild the whole thing. Concatenating makes it trivial to reuse scripts across files and makes build optimizations more difficult to implement. How do you even know what code is being used and which is not?
22+
However, changing one file means you have to rebuild the whole thing. Concatenating makes it easy to reuse scripts across files but makes build optimizations more difficult. How can you find out if code is actually being used or not?
2323

24-
If you are only using one function from lodash or one date utility from moment.js you are actually adding the entire library and just squishing it together. How do you treeshake the dependencies on your code? Also, lazy loading chunks of code can be hard to achieve at scale and requires a lot of manual work from the developer.
24+
Even if you only use a single function from lodash, you have to add the entire library and then squish it together. How do you treeshake the dependencies on your code? Lazy loading chunks of code can be hard to do at scale and requires a lot of manual work from the developer.
2525

2626

2727
## Birth of JavaScript Modules happened thanks to Node.js
@@ -30,25 +30,25 @@ webpack runs on Node.js, a JavaScript runtime that can be used in computers and
3030

3131
When Node.js was released a new era started, and it came with new challenges. Now that JavaScript is not running in a browser, how are Node applications supposed to load new chunks of code? There are no html files and script tags that can be added to it.
3232

33-
CommonJS came out and introduced `require`, which allows you to load and use a module in the current file. This solves scope issues out of the box and which code is used becomes clear since we need to import each module that we are going to need.
33+
CommonJS came out and introduced `require`, which allows you to load and use a module in the current file. This solved scope issues out of the box by importing each module that we need.
3434

3535

3636
## npm + Node.js + modules -- mass distribution
3737

38-
JavaScript is taking over the world as a language, as a platform and as a way to rapidly develop and create fast running applications.
38+
JavaScript is taking over the world as a language, as a platform and as a way to rapidly develop and create fast applications.
3939

40-
But there is no browser support for CommonJS. There are no [live bindings](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358). There are problems with circular references. Sync module resolution loader is slow. While CommonJS was a great solution for Node.js projects, browsers didn't support modules. That's when bundlers and tools like Browserify, RequireJS and SystemJS were created to solve this limitation making it possible to write CommonJS modules that run in a browser.
40+
But there is no browser support for CommonJS. There are no [live bindings](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358). There are problems with circular references. Sync module resolution loader is slow. While CommonJS was a great solution for Node.js projects, browsers didn't support modules. Bundlers and tools like Browserify, RequireJS and SystemJS were created, allowing us to write CommonJS modules that run in a browser.
4141

4242

4343
## ESM - ECMAScript Modules
4444

45-
The good news for web projects is that modules are becoming an official feature in ECMAScript standard, though browser support is still short and early implementations show that bundling is still faster and recommended today.
45+
The good news for web projects is that modules are becoming an official feature in ECMAScript standard. However, browser support is incomplete and bundling is still faster and currently recommended over these early module implementations.
4646

4747

4848
## Wouldn't it be nice…
4949

5050
...to have something that will not only let us write modules but also support any module format (at least until we get to ESM) and that can handle resources and assets at the same time?
5151

52-
This is why webpack exists. It's a tool that not only let's you bundle your JavaScript applications, supporting both ESM and CommonJS, but can be extended to support all different kinds of assets like images, fonts and stylesheets.
52+
This is why webpack exists. It's a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS) and it can be extended to support many different assets such as images, fonts and stylesheets.
5353

54-
webpack cares a lot about performance and it's always adding and improving features like async chunk loading and prefetching to help you deliver the best possible version of your project to the user, always caring about loading times and performance.
54+
webpack cares about performance and load times; it's always improving or adding new features, such as async chunk loading and prefetching, to deliver the best possible experience for your project and your users.

0 commit comments

Comments
 (0)