docs(en): merge webpack.js.org into docschina/cn @ 0f751ed

Author: QC-L

src/content/api/cli.md

@@ -3,6 +3,7 @@ title: 命令行接口（CLI）
 sort: 1
 contributors:
   - anshumanv
+  - snitin315
   - evenstensberg
   - simon04
   - tbroadley
@@ -61,7 +62,7 @@ webpack-cli 提供了许多 flag 来使 webpack 的工作变得简单。默认
 | `--no-color`        | boolean         | 禁用控制台颜色                                                         |
 | `--merge, -m`       | boolean         | 使用 webpack-merge 合并两个配置文件，例如 `-c ./webpack.config.js -c ./webpack.test.config.js` |
 | `--env`             | string[]        | 当它是一个函数时，传递给配置的环境变量                                     |
-| `--progress`        | boolean         | 在构建过程中打印编译进度                                                 |
+| `--progress`        | boolean, string | 在构建过程中打印编译进度                                                 |
 | `--help`            | boolean         | 输出所有支持的 flag 和命令                                              |
 | `--output-path, -o` | string          | webpack 生成文件的输出位置，例如 `./dist`                                |
 | `--target, -t`      | string          | 设置要构建的 target                                                    |
@@ -244,10 +245,11 @@ webpack --env production    # sets env.production == true
 
 `--env` 参数可以接收多个值：
 
-| Invocation                     | Resulting environment       |
-| ------------------------------ | --------------------------- |
-| `webpack --env prod`           | `{ prod: true }`            |
-| `webpack --env prod --env min` | `{ prod: true, min: true }` |
+| Invocation                                    | Resulting environment                   |
+| --------------------------------------------- | --------------------------------------- |
+| `webpack --env prod`                          | `{ prod: true }`                        |
+| `webpack --env prod --env min`                | `{ prod: true, min: true }`             |
+| `webpack --env platform=app --env production` | `{ platform: "app", production: true }` |
 
 T> 请查阅 [environment 变量指南](/guides/environment-variables/)了解更多信息及用法。
 
@@ -270,6 +272,20 @@ webpack --analyze
 
 W> 请确保你的项目中安装了 `webpack-bundle-analyzer`，否则 CLI 会提示你安装它。
 
+## Progress {#progress}
+
+如需查看 webpack 的编译进度，你可以使用 `--progress` flag。
+
+```bash
+webpack --progress
+```
+
+如需收集编译过程中每一步的 profile 数据，你可以将 `profile` 作为值传递给 `--progress` flag。
+
+```bash
+webpack --progress=profile
+```
+
 ## 将 CLI 参数传递给 Node.js {#pass-cli-arguments-to-nodejs}
 
 将参数直接传递给 Node.js 进程，你可以使用 `NODE_OPTIONS` 选项。

src/content/api/resolvers.md

@@ -4,6 +4,7 @@ group: Plugins
 sort: 13
 contributors:
   - EugeneHlushko
+  - chenxsan
 ---
 
 解析器是使用 `enhanced-resolve` 库创建的。`Resolver` 类
@@ -28,17 +29,17 @@ contributors:
 可以通过插件进行定制：
 
 ``` js
-compiler.resolverFactory.plugin('resolver [type]', resolver => {
-  resolver.hooks.resolve.tapAsync('MyPlugin', params => {
-    // ...
+compiler.resolverFactory.hooks.resolver.for('[type]').tap('name', resolver => {
+  // you can tap into resolver.hooks now
+  resolver.hooks.result.tap('MyPlugin', result => {
+    return result;
   });
 });
 ```
 
 其中，`[type]` 是上述三个解析器之一。
 
-请参阅 [`enhanced-resolve` documentation](https://github.com/webpack/enhanced-resolve) 以获得钩子的完整列表以及它们的
-介绍。
+请参阅 [`enhanced-resolve` documentation](https://github.com/webpack/enhanced-resolve) 以获得钩子的完整列表以及它们的介绍。
 
 
 ## 配置选项 {#configuration-options}

src/content/blog/2020-10-10-webpack-5-release.md

@@ -3,6 +3,7 @@ title: Webpack 5 发布 (2020-10-10)
 sort: -202010100
 contributors:
     - sokra
+    - chenxsan
 ---
 
 webpack 4 于 2018 年 2 月发布。
@@ -1096,7 +1097,7 @@ Stats 的 `preset`，`default`，`json` 和 `toString` 现已由插件系统内
 
 ### 全新的监听 {#new-watching}
 
-webpack 所使用的监听已重构。它之前使用的是 `chokidar` 和原生依赖 `fsevents`（仅在 OSX 上）。现在它在只基于原生的 Node.js 中的 `fs`。这意味着在 webpack 中已经没有原生依赖了。
+webpack 所使用的监听已重构。它之前使用的是 `chokidar` 和原生依赖 `fsevents`（仅在 macOS 上）。现在它在只基于原生的 Node.js 中的 `fs`。这意味着在 webpack 中已经没有原生依赖了。
 
 它还能在监听时捕捉更多关于文件系统的信息。目前，它还可以捕获 mtimes 和监视事件时间，以及丢失文件的信息。为此，`WatchFileSystem` API 做了一点小改动。在修改的同时，我们还将 Arrays 转换为 Sets，Objects 转换为 Maps。
 
@@ -1220,7 +1221,7 @@ webpack 曾经有一个单一的方法和类型来表示依赖关系的引用（
 
 ## 其他微小改动 {#other-minor-changes}
 
-- 移除 build 目录，用运行时代替 build
+- 移除内置目录，用运行时代替内置目录
 - 移除不适用的特性
     - BannerPlugin 目前只支持一个参数，这个参数可以是对象，字符串或函数
 - 移除 `CachePlugin`
@@ -1395,7 +1396,7 @@ webpack 曾经有一个单一的方法和类型来表示依赖关系的引用（
 - DependencyReference 现将函数传递给模块，而非模块。
 - 移除了 `HarmonyImportSpecifierDependency.redirectedId`
     - 迁移：使用 `setId` 代替
-- acorn 5 -> 7
+- acorn 5 -> 8
 - 测试
     - HotTestCases 现可为多个目标运行，包括 `async-node` `node` `web` `webworker`
     - TestCases 现在可以用 `store: "instant"` 和 `store: "pack"` 来运行系统缓存。
@@ -1407,7 +1408,7 @@ webpack 曾经有一个单一的方法和类型来表示依赖关系的引用（
 - loader-runner 已升级：https://github.com/webpack/loader-runner/releases/tag/v3.0.0
 - `Compilation` 中的 `file/context/missingDependencies` 因性能问题不再排序
     - 不要依赖排序
-- webpack-sources 已升级：https://github.com/webpack/webpack-sources/releases/tag/v2.0.0-beta.0
+- webpack-sources 升级至 version 2：https://github.com/webpack/webpack-sources/releases/tag/v2.0.1
 - 删除了对 webpack-command 的支持
 - 使用 schema-utils@2 进行模式校验
 - `Compiler.assetEmitted` 改进了参数二，增加了更多信息

src/content/configuration/optimization.md

@@ -478,7 +478,7 @@ module.exports = {
 
 ## `optimization.sideEffects` {#optimizationsideeffects}
 
-`boolean = true`
+`boolean = true`  `string: 'flag'` 
 
 告知 webpack 去辨识 `package.json` 中的  [`副作用`](https://github.com/webpack/webpack/blob/master/examples/side-effects/README.md) 标记或规则，以跳过那些当导出不被使用且被标记不包含副作用的模块。
 
@@ -509,6 +509,19 @@ module.exports = {
 };
 ```
 
+只使用手动 flag，并且不对源码进行分析：
+
+```js
+module.exports = {
+  //...
+  optimization: {
+    sideEffects: 'flag'
+  }
+};
+```
+
+此处的 `'flag'` 值在非生产环境默认使用。
+
 ## `optimization.portableRecords` {#optimizationportablerecords}
 
 `boolean`

src/content/contribute/writing-a-loader.md

@@ -152,7 +152,7 @@ __loader.js__
 
 ```js
 import { getOptions } from 'loader-utils';
-import validateOptions from 'schema-utils';
+import { validate } from 'schema-utils';
 
 const schema = {
   type: 'object',
@@ -166,7 +166,10 @@ const schema = {
 export default function(source) {
   const options = getOptions(this);
 
-  validateOptions(schema, options, 'Example Loader');
+  validate(schema, options, {
+    name: 'Example Loader',
+    baseDataPath: 'options'
+  });
 
   // Apply some transformations to the source...
 
@@ -370,9 +373,9 @@ import compiler from './compiler.js';
 
 test('Inserts name and outputs JavaScript', async () => {
   const stats = await compiler('example.txt', { name: 'Alice' });
-  const output = stats.toJson().modules[0].source;
+  const output = stats.toJson({source: true}).modules[0].source;
 
-  expect(output).toBe('export default "Hey Alice!\"');
+  expect(output).toBe('export default "Hey Alice!\\n"');
 });
 ```
 

src/content/guides/asset-modules.md

@@ -26,6 +26,56 @@ related:
 - `asset/source` 导出资源的源代码。之前通过使用 `raw-loader` 实现。
 - `asset` 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 `url-loader`，并且配置资源体积限制实现。
 
+当在 webpack 5 中使用旧的 assets loader（如 `file-loader`/`url-loader`/`raw-loader` 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 `'javascript/auto'` 来解决。
+
+__webpack.config.js__
+
+``` diff
+module.exports = {
+  module: {
+   rules: [
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+            }
+          },
+        ],
++       type: 'javascript/auto'
+      },
+   ]
+  },
+}
+```
+
+如需从 asset loader 中排除来自新 URL 处理的 asset，请添加 `dependency: { not: ['url'] }` 到 loader 配置中。
+
+__webpack.config.js__
+
+``` diff
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpg|gif)$/i,
++       dependency: { not: ['url'] }, 
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
+    ],
+  }
+}
+```
+
 ## Resource 资源 {#resource-assets}
 
 __webpack.config.js__
@@ -163,7 +213,7 @@ __src/index.js__
 
 ```diff
 - import mainImage from './images/main.png';
-+ import metroMap from './images/matro.svg';
++ import metroMap from './images/metro.svg';
 
 - img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png'
 + block.style.background = `url(${metroMap})`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=)
@@ -250,7 +300,7 @@ Hello world
 __src/index.js__
 
 ```diff
-- import metroMap from './images/matro.svg';
+- import metroMap from './images/metro.svg';
 + import exampleText from './example.txt';
 
 - block.style.background = `url(${metroMap}); // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=)