Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"what is webpack" chapter translation #2

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 59 additions & 59 deletions manuscript/04_what_is_webpack.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion manuscript/13_Conclusion.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ As this book has demonstrated, webpack is a versatile tool. To make it easier to
* **Source maps** allow you to debug your code in the browser during development. They can also give better quality stack traces during production usage if you capture the output. The *Source Maps* chapter delves into the topic.
* To keep your builds fast, consider optimizing. The *Performance* chapter discusses a variety of strategies you can use to achieve this.
* To keep your configuration maintainable, consider composing it. As webpack configuration is JavaScript code, it can be arranged in many ways. The *Composing Configuration* chapter discusses the topic.
* The way webpack consumes packages can be customized. The *Consuming Packages* chapter covers specific techniques related to this.
* The way webpack consumes packages can be customized. The *Обработка Пакетов* chapter covers specific techniques related to this.
* Sometimes you have to extend webpack. The *Extending with Loaders* and *Extending with Plugins* chapters show how to achieve this. You can also work on top of webpack’s configuration definition and implement an abstraction of your own for it to suit your purposes.

## Development Checklist
Expand Down
2 changes: 1 addition & 1 deletion manuscript/appendices/01_comparison.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Comparison of Build Tools
# Сравнение Инструментов Для Сборки

Back in the day, it was enough to concatenate scripts together. Times have changed, though, and now distributing your JavaScript code can be a complicated endeavor. This problem has escalated with the rise of single-page applications (SPAs). They tend to rely on many hefty libraries.

Expand Down
Binary file modified manuscript/images/webpack-process.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion manuscript/loading/01_loader_definitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Webpack provides multiple ways to set up module loaders. Webpack 2 simplified th

The other way is to set `context` field as this gives a similar effect and affects the way entry points and loaders are resolved. It doesn't have an impact on the output, though, and you still need to use an absolute path or `/` there.

Assuming you set an `include` or `exclude` rule, packages loaded from *node_modules* still work as the assumption is that they have been compiled in such a way that they work out of the box. If they don't, then you have to apply techniques covered in the *Consuming Packages* chapter.
Assuming you set an `include` or `exclude` rule, packages loaded from *node_modules* still work as the assumption is that they have been compiled in such a way that they work out of the box. If they don't, then you have to apply techniques covered in the *Обработка Пакетов* chapter.

T> `include`/`exclude` is handy with *node_modules* as webpack processes and traverses the installed packages by default when you import JavaScript files to your project. Therefore you need to configure it to avoid that behavior. Other file types don't suffer from this issue.

Expand Down
2 changes: 1 addition & 1 deletion manuscript/optimizing/03_environment_variables.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ if (process.env.NODE_ENV === "production") {

Webpack can pick the right code based on the `DefinePlugin` declaration and this code. You have to use CommonJS module definition style here as ES2015 `import`s don't allow dynamic behavior by design.

T> A related technique, **aliasing**, is discussed in the *Consuming Packages* chapter.
T> A related technique, **aliasing**, is discussed in the *Обработка Пакетов* chapter.

{pagebreak}

Expand Down
2 changes: 1 addition & 1 deletion manuscript/optimizing/06_build_analysis.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ Entrypoints:
main.d5d711b1.css
```

You can increase the limit or remove the configuration to get rid of the warning. An attractive option would be to replace React with a lighter alternative as discussed in the *Consuming Packages* chapter.
You can increase the limit or remove the configuration to get rid of the warning. An attractive option would be to replace React with a lighter alternative as discussed in the *Обработка пакетов* chapter.

{pagebreak}

Expand Down
2 changes: 1 addition & 1 deletion manuscript/optimizing/07_performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ Loaders have their optimizations as well:

It's possible to optimize rebundling times during development by pointing the development setup to a minified version of a library, such as React. In React's case, you lose `propType`-based validation. If speed is important, this technique is worth it.

`module.noParse` accepts a RegExp or an array of RegExps. In addition to telling webpack not to parse the minified file you want to use, you also have to point `react` to it by using `resolve.alias`. The aliasing idea is discussed in detail in the *Consuming Packages* chapter.
`module.noParse` accepts a RegExp or an array of RegExps. In addition to telling webpack not to parse the minified file you want to use, you also have to point `react` to it by using `resolve.alias`. The aliasing idea is discussed in detail in the *Обработка Пакетов* chapter.

{pagebreak}

Expand Down
2 changes: 1 addition & 1 deletion manuscript/output/01_targets.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Build Targets
# Целевые Платформы

Even though webpack is used most commonly for bundling web applications, it can do more. You can use it to target Node or desktop environments, such as Electron. Webpack can also bundle as a library while writing an appropriate output wrapper making it possible to consume the library.

Expand Down
2 changes: 1 addition & 1 deletion manuscript/techniques/02_web_workers.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Moving data between the main thread and the worker comes with communication-rela

The idea of workers is valuable on a more general level. [parallel-webpack](https://www.npmjs.com/package/parallel-webpack) uses [worker-farm](https://www.npmjs.com/package/worker-farm) underneath to parallelize webpack execution.

As discussed in the *Build Targets* chapter, webpack allows you to build your application as a worker itself. To get the idea of web workers better, you'll learn how to build a small worker using [worker-loader](https://www.npmjs.com/package/worker-loader).
As discussed in the *Целевые Платформы* chapter, webpack allows you to build your application as a worker itself. To get the idea of web workers better, you'll learn how to build a small worker using [worker-loader](https://www.npmjs.com/package/worker-loader).

T> Sharing data between the host and the worker may become easier in the future thanks to technologies such as [SharedArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer).

Expand Down
4 changes: 2 additions & 2 deletions manuscript/techniques/06_consuming.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Consuming Packages
# Обработка Пакетов

Sometimes packages have not been packaged the way you expect, and you have to tweak the way webpack interprets them. Webpack provides multiple ways to achieve this.

Expand Down Expand Up @@ -72,7 +72,7 @@ Webpack allows you to customize the module resolution behavior using the `resolv
* [directory-named-webpack-plugin](https://www.npmjs.com/package/directory-named-webpack-plugin) maps imports made against directories to files matching the directory name. For example, it would map `import foo from "./foo";` to `import foo from "./foo/foo.js";`. The pattern is popular with React and using the plugin will allow you to simplify your code. [babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver) achieves the same behavior through Babel.
* [webpack-resolve-short-path-plugin](https://www.npmjs.com/package/webpack-resolve-short-path-plugin) was designed to avoid deeply nested imports like `import foo from "../../../foo";` by adding support for tilde (`~`) syntax. `import foo from "~foo"` would resolve against the project root if the plugin is used.

## Consuming Packages Outside of Webpack
## Обработка Пакетов Outside of Webpack

Browser dependencies, like jQuery, are often served through publicly available Content Delivery Networks (CDN). CDNs allow you to push the problem of loading popular packages elsewhere. If a package has been already loaded from a CDN and it's in the user cache, there is no need to load it.

Expand Down