Skip to content

Commit 24f90d3

Browse files
Merge pull request webpack#105 from dear-lizhihua/cn
cn
2 parents d6724e2 + e78d7da commit 24f90d3

File tree

7 files changed

+44
-44
lines changed

7 files changed

+44
-44
lines changed

content/configuration/devtool.md

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,60 +7,59 @@ contributors:
77
- SpaceK33z
88
---
99

10-
This option controls if and how Source Maps are generated.
10+
此选项控制是否生成,以及如何生成 Source Map。
1111

1212
## `devtool`
1313

1414
`string` `false`
1515

16-
选择一种[源映射(source mapping)](http://blog.teamtreehouse.com/introduction-source-maps)来增强调试过程。注意,以下选项能够可能会显著地影响构建(build)和重构建(rebuild)的速度……
16+
选择一种 [source map](http://blog.teamtreehouse.com/introduction-source-maps) 来增强调试过程。注意,以下选项能够可能会很明显地影响构建(build)和重构建(rebuild)的速度
1717

18-
devtool | build | rebuild | production | quality
18+
devtool | 构建 | 重构建 | 生产环境 | 特性
1919
------------------------------|-------|---------|------------|--------------------------
20-
eval | +++ | +++ | no | 生成代码
21-
cheap-eval-source-map | + | ++ | no | 转换后代码(仅限行)
22-
cheap-source-map | + | o | yes | 转换后代码(仅限行)
20+
eval | +++ | +++ | no | 生成后的代码
21+
cheap-eval-source-map | + | ++ | no | 转换过的代码(仅限行)
22+
cheap-source-map | + | o | yes | 转换过的代码(仅限行)
2323
cheap-module-eval-source-map | o | ++ | no | 原始源码(仅限行)
2424
cheap-module-source-map | o | - | yes | 原始源码(仅限行)
2525
eval-source-map | -- | + | no | 原始源码
2626
source-map | -- | -- | yes | 原始源码
27-
nosources-source-map | -- | -- | yes | 无源码内容
27+
nosources-source-map | -- | -- | yes | 无源码内容
2828

29-
Some of these values are suited for development and some for production. For development you typically want fast Source Maps at the cost of bundle size, but for production you want separate Source Maps that are accurate.
29+
其中一些值适用于开发环境,一些适用于生产环境。对于开发环境,通常希望更快速的 Source Map,需要添加到 bundle 中以增加体积为代价,但是对于生产环境,则希望更精准的 Source Map,需要从 bundle 中分离并独立存在。
3030

31-
W> There are some issues with Source Maps in Chrome. [We need your help!](https://github.com/webpack/webpack/issues/3165).
31+
W> Chrome 中的 Source Map 有一些问题。[我们需要你的帮助!](https://github.com/webpack/webpack/issues/3165)
3232

33-
### For development
33+
### 对于开发环境
3434

35-
`eval` - Each module is executed with `eval()` and `//@ sourceURL`. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code.
35+
`eval` - 每个模块都使用 `eval()` 执行,并且都有 `//@ sourceURL`。此选项会相当快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码,所以不能正确的显示显示行数。
3636

37-
`inline-source-map` - A SourceMap is added as a DataUrl to the bundle.
37+
`inline-source-map` - SourceMap 转换为 DataUrl 后添加到 bundle 中。
3838

39-
`eval-source-map` - Each module is executed with `eval()` and a SourceMap is added as a DataUrl to the `eval()`. Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code.
39+
`eval-source-map` - 每个模块使用 `eval()` 执行,并且 SourceMap 转换为 DataUrl 后添加到 `eval()` 中。初始化 SourceMap 时比较慢,但是会在重构建时提供很快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。
4040

41-
`cheap-module-eval-source-map` - Like `eval-source-map`, each module is executed with `eval()` and a SourceMap is added as a DataUrl to the `eval()`. It is "cheap" because it doesn't have column mappings, it only maps line numbers.
41+
`cheap-module-eval-source-map` - 就像 `eval-source-map`,每个模块使用 `eval()` 执行,并且 SourceMap 转换为 DataUrl 后添加到 `eval()` 中。"低开销"是因为它没有生成列映射(column map),只是映射行数。
4242

43-
### For production
43+
### 对于生产环境
4444

45-
`source-map` - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.
45+
`source-map` - 生成完整的 SourceMap,输出为独立文件。由于在 bundle 中添加了引用注释,所以开发工具知道在哪里去找到 SourceMap。
4646

47-
`hidden-source-map` - Same as `source-map`, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.
47+
`hidden-source-map` - `source-map` 相同,但是没有在 bundle 中添加引用注释。如果你只想要 SourceMap 映射错误报告中的错误堆栈跟踪信息,但不希望将 SourceMap 暴露给浏览器开发工具。
4848

49-
`cheap-source-map` - A SourceMap without column-mappings ignoring loaded Source Maps.
49+
`cheap-source-map` - 不带列映射(column-map)的 SourceMap,忽略加载的 Source Map。
5050

51-
`cheap-module-source-map` - A SourceMap without column-mappings that simplifies loaded Source Maps to a single mapping per line.
51+
`cheap-module-source-map` - 不带列映射(column-map)的 SourceMap,将加载的 Source Map 简化为每行单独映射。
5252

53-
`nosources-source-map` - A SourceMap is created without the `sourcesContent` in it. It can be used to map stack traces on the client without exposing all of the source code.
53+
`nosources-source-map` - 创建一个没有 `sourcesContent` 的 SourceMap。它可以用来映射客户端(译者注:指浏览器)上的堆栈跟踪,而不会暴露所有的源码。
5454

55-
T> See [`output.sourceMapFilename`](/configuration/output#output-sourcemapfilename) to customize the filenames of generated Source Maps.
55+
T> 查看 [`output.sourceMapFilename`](/configuration/output#output-sourcemapfilename) 自定义生成的 Source Map 的文件名。
5656

5757
?> This page needs more information to make it easier for users to choose a good option.
5858

59-
# References
59+
# 参考
6060

61-
- [Enabling Sourcemaps](http://survivejs.com/webpack/developing-with-webpack/enabling-sourcemaps/)
62-
- [webpack devtool source map](http://cheng.logdown.com/posts/2016/03/25/679045
63-
)
61+
- [Enabling Sourcemaps(启用 Sourcemap)](http://survivejs.com/webpack/developing-with-webpack/enabling-sourcemaps/)
62+
- [webpack devtool source map(webpack 开发工具中 source map 的一些验证和结论)](http://cheng.logdown.com/posts/2016/03/25/679045)
6463

6564
***
6665

content/configuration/externals.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: 扩展(Externals)
2+
title: 外部扩展(Externals)
33
sort: 13
44
contributors:
55
- sokra
@@ -36,7 +36,7 @@ externals: {
3636
}
3737
```
3838

39-
这样就脱离了那些不需要改动的独立模块,换句话,下面展示的代码还可以正常运行:
39+
这样就剥离了那些不需要改动的独立模块,换句话,下面展示的代码还可以正常运行:
4040

4141
```javascript
4242
import $ from 'jquery';

content/configuration/output.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ contributors:
77
- tomasAlabes
88
---
99

10-
位于对象最顶级 `output` ,包括了一组选项,指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。
10+
`output` 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。
1111

1212

1313
## `output.chunkFilename`
@@ -436,39 +436,40 @@ publicPath: "", // 相对于 HTML 页面(目录相同)
436436

437437
`string`
438438

439-
This option is only used when [`devtool`](/configuration/devtool) uses a SourceMap option which writes an output file.
439+
此选项会向硬盘写入一个输出文件,只在 [`devtool`](/configuration/devtool) 启用了 SourceMap 选项时才使用。
440440

441-
Configure how source maps are named. By default `"[file].map"` is used.
442441

443-
Technically the `[name]`, `[id]`, `[hash]` and `[chunkhash]` [placeholders](#output-filename) can be used, if generating a SourceMap for chunks. In addition to that the `[file]` placeholder is replaced with the filename of the original file. It's recommended to only use the `[file]` placeholder, as the other placeholders won't work when generating SourceMaps for non-chunk files. Best leave the default.
442+
配置 source map 的命名方式。默认使用 `"[file].map"`
443+
444+
技术上看,对于 chunk 生成的 SourceMap,可以使用 `[name]`, `[id]`, `[hash]``[chunkhash]` [占位符(placeholder)](#output-filename)。除了替换这些占位符,`[file]` 占位符还可以被替换为原始文件(original file)的文件名。建议只使用 `[file]` 占位符,因为其他占位符在非 chunk 文件生成的 SourceMap 时不起作用。最好保持默认。
444445

445446

446447
## `output.sourcePrefix`
447448

448449
`string`
449450

450-
Change the prefix for each line in the output bundles.
451+
修改输出 bundle 中每行的前缀。
451452

452453
``` js
453454
sourcePrefix: "\t"
454455
```
455456

456-
Note by default an empty string is used. Using some kind of indention makes bundles look more pretty, but will cause issues with multi-line string.
457+
注意,默认情况下使用空字符串。使用一些缩进会看起来更美观,但是可能导致多行字符串中的问题。
457458

458-
There is no need to change it.
459+
这里没有必要修改它。
459460

460461

461462
## `output.umdNamedDefine`
462463

463464
`boolean`
464465

465-
When using `libraryTarget: "umd"`, setting:
466+
当使用了 `libraryTarget: "umd"`,设置:
466467

467468
``` js
468469
umdNamedDefine: true
469470
```
470471

471-
will name the AMD module of the UMD build. Otherwise an anonymous `define` is used.
472+
会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 `define`
472473

473474
***
474475

content/get-started/index.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ contributors:
1111
webpack 是构建我们应用程序中 JavaScript 模块的工具。从使用 `webpack` [cli](/api/cli)[api](/api/node) ,并按照[安装说明](/get-started/install-webpack)开始。
1212
webpack 简化快速构建应用程序依赖图表的流程,以正确的顺序打包他们。webpack 能够配置自定义优化代码,在生产环境构建时拆分 vendor/css/js 代码,运行开发服务实现页面无刷新、代码热重载,以及其他非常酷炫的特性。了解更多关于[为什么使用 wepback](/get-started/why-webpack)
1313

14-
## 创建一个包文件
14+
## 创建一个 bundle 文件
1515

1616
创建一个示例目录来尝试 wepback。[安装 webpack](/get-started/install-webpack)
1717

@@ -99,7 +99,7 @@ Also we will need to change the `index.html` to expect a single bundled js file.
9999

100100
这里,`index.js` 显式要求引入的 `lodash` 必须存在,然后将它以 `_` 的别名绑定(不会造成全局范围变量名污染)。
101101

102-
通过展示出模块所需依赖,webpack 能够利用这些信息去构建依赖图表。然后 webpack 使用图表生成一个优化过的包文件,脚本还将以正确的顺序执行。并且没有用到的依赖将不会被包文件引入
102+
通过展示出模块所需依赖,webpack 能够利用这些信息去构建依赖图表。然后 webpack 使用图表生成一个优化过的 bundle,脚本还将以正确的顺序执行。并且没有用到的依赖将不会被 bundle 引入
103103

104104
现在在此文件夹下运行 `webpack`,其中 `index.js` 是输入文件,`bundle.js` 是输出文件,输出文件已打包此页面所需的所有代码。
105105

@@ -151,9 +151,9 @@ index.js 1.56 kB 0 [emitted] main
151151

152152
T> 如果存在 `webpack.config.js``webpack` 命令将默认选择使用它。
153153

154-
T> 如果使用上面"创建一个包文件"章节,已经成功创建过 `dist/bundle.js` 文件,请删除 `dist` 子目录,来验证通过 `webpack.config.js` 文件的设置,所输出内容是否符合预期。
154+
T> 如果使用上面"创建一个 bundle 文件"章节,已经成功创建过 `dist/bundle.js` 文件,请删除 `dist` 子目录,来验证通过 `webpack.config.js` 文件的设置,所输出内容是否符合预期。
155155

156-
配置文件可以更加灵活地使用 webpack。使用配置文件,我们可以对我们的包文件添加加载器规则、插件、解析选项,以及许多其他增强功能。
156+
配置文件可以更加灵活地使用 webpack。使用配置文件,我们可以对我们的 bundle 添加加载器规则、插件、解析选项,以及许多其他增强功能。
157157

158158
## 使用引入 npm 的 webpack
159159

content/guides/code-splitting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ contributors:
66
- pastelsky
77
---
88

9-
代码拆分是 webpack 中最引人注目的特性之一。你可以把你的代码分离到不同的打包文件(bundle)中,然后你就可以去按需加载这些文件 - 例如,当用户导航到匹配的路由,或用户触发了事件时,加载对应文件。如果使用了正确的使用方式,这可以使我们有更小的 bundle,同时可以控制优先加载资源,从而对你的应用程序加载时间产生重要影响。
9+
代码拆分是 webpack 中最引人注目的特性之一。你可以把你的代码分离到不同的 bundle 中,然后你就可以去按需加载这些文件 - 例如,当用户导航到匹配的路由,或用户触发了事件时,加载对应文件。如果使用了正确的使用方式,这可以使我们有更小的 bundle,同时可以控制优先加载资源,从而对你的应用程序加载时间产生重要影响。
1010

1111
总的来说,使用 `webpack` 可以完成的两类代码分离工作:
1212

content/guides/development-vagrant.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ module.exports = {
3333
};
3434
```
3535

36-
然后创建 `index.html`。其中的 `script` 标签应当指向你的打包文件(bundle)。如果 `output.filename` 没有在配置里设定,它的默认值便是 `bundle.js`
36+
然后创建 `index.html`。其中的 `script` 标签应当指向你的 bundle。如果 `output.filename` 没有在配置里设定,它的默认值便是 `bundle.js`
3737

3838
```html
3939
<!DOCTYPE html>
@@ -59,7 +59,7 @@ webpack-dev-server --host 0.0.0.0 --public 10.10.10.61:8080 --watch-poll
5959

6060
默认配置下,服务器只允许在本地访问。通过更改 `--host` 参数,便能够在我们的 PC 上访问它。
6161

62-
webpack-dev-server 会在打包文件中加上一段连接 WebSocket 的脚本(script),一旦你的文件被更改,服务器便会重新加载应用。`--public` 参数便是为了告诉脚本从哪里去找 WebSocket。服务器默认使用 `8080` 端口,我们也需要在这里标明。
62+
webpack-dev-server 会在 bundle 中加上一段连接 WebSocket 的脚本(script),一旦你的文件被更改,服务器便会重新加载应用。`--public` 参数便是为了告诉脚本从哪里去找 WebSocket。服务器默认使用 `8080` 端口,我们也需要在这里标明。
6363

6464
`--watch-poll` 确保 webpack 能够察觉到文件的更改。默认配置下,webpack 会监听文件系统触发的相关事件,但是 VirtualBox 总会有这样或那样的的问题。
6565

content/guides/hmr-react.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ This needs to be placed inside of `dist` in your project root. webpack-dev-serve
246246
```
247247
### Package.json
248248

249-
最后,让我们启动 `webpack-dev-server` 来生成打包文件,看看 HMR 的运行效果吧。我们可以使用下面的 `package.json` 进入:
249+
最后,让我们启动 `webpack-dev-server` 来打包我们的代码,看看 HMR 的运行效果吧。我们可以使用下面的 `package.json` 进入:
250250

251251
```json
252252
{

0 commit comments

Comments
 (0)