Skip to content

Commit c560f64

Browse files
committed
Merge branch 'master' into cn
# Conflicts: # content/concepts/configuration.md # content/concepts/hot-module-replacement.md # content/concepts/modules.md # content/concepts/output.md # content/concepts/plugins.md # content/concepts/targets.md # content/configuration/externals.md # content/configuration/index.md
2 parents 7338b1b + 3188964 commit c560f64

File tree

13 files changed

+43
-23
lines changed

13 files changed

+43
-23
lines changed

.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,3 @@ npm-debug.log
33
build
44
# generated
55
.antwar
6-

content/concepts/hot-module-replacement.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ contributors:
55
- SpaceK33z
66
- sokra
77
- GRardB
8+
- rouzbeh84
89
---
910

1011
模块热替换功能会在应用程序运行过程中替换、添加或删除[模块](/concepts/modules/),而无需重新加载页面。这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间。
@@ -35,7 +36,7 @@ manifest 包括新的编译 hash 和所有的待更新 chunk 目录。
3536

3637
### 站在模块的角度
3738

38-
HMR 是可选功能,只会影响包含 HRM 代码的模块。举个例子,通过 [style-loder](https://github.com/webpack/style-loader) 为 style 样式追加补丁。
39+
HMR 是可选功能,只会影响包含 HRM 代码的模块。举个例子,通过 [style-loader](https://github.com/webpack/style-loader) 为 style 样式追加补丁。
3940
为了运行追加补丁,style-loader 实现了 HMR 接口;当它通过 HRM 接收到更新,它会使用新的样式替换旧的样式。
4041

4142
类似的,当在一个模块中实现了 HMR 接口,你可以描述出当模块被更新后发生了什么。然而在多数情况下,不需要强制在每个模块中写入 HMR 代码。如果一个模块没有 HMR 处理函数,更新就会冒泡。这意味着一个简单的处理函数能够对整个模块树(complete module tree)进行处理。如果在这个模块树中,一个单独的模块被更新,那么整个模块树都会被重新加载(只会重新加载,不会迁移)。

content/concepts/modules.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ sort: 7
44
contributors:
55
- TheLarkInn
66
- simon04
7+
- rouzbeh84
78
---
89

910
[模块化编程](https://en.wikipedia.org/wiki/Modular_programming),开发者将程序分解成称为_模块_的离散功能块。
@@ -40,7 +41,7 @@ webpack 社区已经为以及各种流行语言和语言处理器构建了_加
4041
* [Less](http://lesscss.org)
4142
* [Stylus](http://stylus-lang.com)
4243

43-
总的来说,webpack 提供了可定制的、强大和丰富的 API,允许**任何技术栈**使用 webpack,保持了在你的开发、测试和生成流程中**无侵入性**
44+
总的来说,webpack 提供了可定制的、强大和丰富的 API,允许**任何技术栈**使用 webpack,保持了在你的开发、测试和生成流程中**无侵入性(non-opinionated)**
4445

4546
有关完整列表,请参考[**加载器列表**](/loaders)[**自己编写**](/api/loaders)
4647

content/concepts/output.md

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: 输出(Output)
33
sort: 3
44
contributors:
55
- TheLarkInn
6+
- chyipin
7+
- rouzbeh84
68
---
79

810
选项影响编译输出。`output` 选项控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个`入口`起点,但只指定一个`输出`配置。
@@ -11,14 +13,19 @@ contributors:
1113

1214
## 用法(Usage)
1315

14-
设置 `output` 属性,只需要在你的 webpack 配置简单的设置输出值:
16+
在 webpack 中配置 `output` 属性的最低要求是,将它的值设置为一个对象,包括以下两点:
17+
18+
编译文件的`文件名(filename)`首选:`// main.js || bundle.js || index.js`
19+
20+
[`output.path`](#output-path) 对应一个**绝对路径**,此路径是你希望一次性打包的目录。
1521

1622
**webpack.config.js**
1723

1824
```javascript
1925
const config = {
2026
output: {
21-
filename: 'bundle.js'
27+
filename: 'bundle.js',
28+
path: '/home/proj/public/assets'
2229
}
2330
};
2431

@@ -58,6 +65,7 @@ module.exports = config;
5865
> 默认值:`false`
5966
6067
> 参考[[library and externals]]
68+
6169
> 参考[[Development Tools]]
6270
6371
### `output.devtoolLineToLine`
@@ -75,7 +83,8 @@ module.exports = config;
7583
指定硬盘每个输出文件的名称。在这里你**不能**指定绝对路径!`output.path` 选项规定了文件被写入硬盘的位置。`filename` 仅用于命名每个文件。
7684

7785
**单个入口**
78-
``` javascript
86+
87+
```javascript
7988
{
8089
entry: './src/app.js',
8190
output: {
@@ -192,20 +201,21 @@ output: {
192201
<link href="/assets/spinner.gif"/>
193202
</head>
194203
```
204+
195205
接下来是一个更复杂的例子,来说明对资源使用 CDN 和 hash。
196206

197207
**config.js**
198208

199-
``` javascript
209+
```javascript
200210
output: {
201-
path: "/home/proj/cdn/assets/[hash]",
202-
publicPath: "http://cdn.example.com/assets/[hash]/"
211+
path: "/home/proj/cdn/assets/[hash]",
212+
publicPath: "http://cdn.example.com/assets/[hash]/"
203213
}
204214
```
205215

206216
**注意:**在编译时不知道最终输出文件的 `publicPath` 的情况下,`publicPath` 可以留空,并且在入口点文件运行时动态设置。如果你在编译时不知道 `publicPath`,你可以先忽略它,并且在入口点设置 `__webpack_public_path__`
207217

208-
``` javascript
218+
```javascript
209219
__webpack_public_path__ = myRuntimePublicPath
210220

211221
// 其他的应用程序入口

content/concepts/plugins.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ sort: 5
44
contributors:
55
- TheLarkInn
66
- jhnns
7+
- rouzbeh84
78
---
89

910
插件是 wepback 的[支柱](https://github.com/webpack/tapable)功能。在你使用 webpack 配置时,webpack 自身也构建于**同样的插件系统**上!
@@ -12,7 +13,7 @@ contributors:
1213

1314
## 剖析
1415

15-
webpack **插件**是一个具有 `apply` 属性的 JavaScript 对象。 `apply` 属性会被 webpack 解析器(compiler)调用,并且可在整个编译生命周期(compilation lifecycle)访问。
16+
webpack **插件**是一个具有 [`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 属性的 JavaScript 对象。 `apply` 属性会被 webpack 解析器(compiler)调用,并且可在整个编译生命周期(compilation lifecycle)访问。
1617

1718

1819
**ConsoleLogOnBuildWebpackPlugin.js**

content/concepts/targets.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: 部署目标(Targets)
33
sort: 10
44
contributors:
55
- TheLarkInn
6+
- rouzbeh84
67
---
78

89
因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种部署_目标(target)_,你可以在你的 webpack [配置](/configuration)中设置。
@@ -21,12 +22,13 @@ module.exports = {
2122
};
2223
```
2324

24-
每个_目标_都有各种部署/环境特定的附加项,以支持满足其需求。查看[可用目标](/configuration/target)
25-
Each _target_ has a variety of deployment/environment specific additions, support to fit its needs. See what [targets are available](/configuration/target).
25+
在上面例子中,使用 `node` webpack 会编译为用于「类 Node.js」环境(使用 Node.js 的 `require` ,而不是使用任意内置模块(如 `fs``path`)来加载 chunk)。
2626

27-
?> We should expand on this further. What specifically is included.
27+
每个_target_都有各种部署(deployment)/环境(environment)特定的附加项,以支持满足其需求。查看[target 的可用值](/configuration/target)
2828

29-
## 多个目标
29+
?>Further expansion for other popular target values
30+
31+
## 多个 Target
3032

3133
尽管 webpack 不支持向 `target` 传入多个字符串,你可以通过打包两份分离的配置来创建同构的库:
3234

@@ -62,7 +64,7 @@ module.exports = [ serverConfig, clientConfig ];
6264

6365
### 打包输出比较
6466

65-
**[compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)**:大量有关「测试和查看不同的 webpack _目标_」的资源。也有大量 bug 报告。
67+
**[compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)**:大量有关「测试和查看不同的 webpack _target_」的资源。也有大量 bug 报告。
6668

6769
?> Need to find up to date examples of these webpack targets being used in live code or boilerplates.
6870

content/configuration/entry-context.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ sort: 4
44
contributors:
55
- sokra
66
- skipjack
7+
- tarang9211
78
---
89

9-
?> TODO: Short description
10+
The entry object is where Webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files.
1011

1112
## `context`
1213

content/configuration/externals.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ Your bundle which has external dependencies can be used in various module contex
5252

5353
* __global__ - An external library can be available as a global variable. The consumer can achieve this by including the external library in a script tag. This is the default setting for externals.
5454
* __commonjs__ - The consumer application may be using a CommonJS module system and hence the external library should be available as a CommonJS module.
55+
* __commonjs2__ - Similar to the above line but where the export is `module.exports.default`.
5556
* __amd__ - Similar to the above line but using AMD module system.
5657

5758
`externals` accepts various syntax and interprets them in different manners.

content/configuration/index.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ var path = require('path');
130130
[exclude](/configuration/module#rule-exclude): [
131131
path.resolve(__dirname, "app/demo-files")
132132
]
133-
// 匹配条件,每个选项都接收正则表达式或字符串
134-
// test 和 include 行为等同,都是必须匹配选项
133+
// 这里是匹配条件,每个选项都接收一个正则表达式或字符串
134+
// test 和 include 具有相同的作用,都是必须匹配选项
135135
// exclude 是必不匹配选项(优先于 test 和 include)
136136
// 最佳实践:
137137
// - 只在 test 和 文件名匹配 中使用正则表达式
@@ -143,7 +143,7 @@ var path = require('path');
143143
144144
[enforce](/configuration/module#rule-enforce): "pre",
145145
[enforce](/configuration/module#rule-enforce): "post",
146-
// 即使规则被覆盖也要应用这些规则(高级选项)
146+
// 标识应用这些规则,即使规则覆盖(高级选项)
147147
148148
[loader](/configuration/module#rule-loader): "babel-loader",
149149
// 应该应用的 loader,它相对上下文解析

content/configuration/resolve.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,11 +238,11 @@ W> Changes to cached paths may cause failure in rare cases.
238238

239239
`object`
240240

241-
This set of options is identical to the `resolve` set above, but is used only to resolve webpack's [loader](/concepts/loaders) packages. Default:
241+
This set of options is identical to the `resolve` property set above, but is used only to resolve webpack's [loader](/concepts/loaders) packages. Default:
242242

243243
```js
244244
{
245-
modulesDirectories: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
245+
modules: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
246246
extensions: ["", ".webpack-loader.js", ".web-loader.js", ".loader.js", ".js"],
247247
packageMains: ["webpackLoader", "webLoader", "loader", "main"]
248248
}

content/guides/code-splitting-require.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: 代码拆分 - 使用 require.ensure
33
sort: 5
44
contributors:
55
- pksjce
6+
- rahulcs
67
---
78

89
In this section, we will discuss how webpack splits code using `require.ensure()`.
@@ -74,6 +75,8 @@ On running webpack on this project, we find that webpack has created two new bun
7475

7576
`b.js` is bundled in `0.bundle.js`.
7677

78+
?> `require.ensure` relies on `Promises` internally. If you use `require.ensure` with older browsers, remember to shim `Promise.` [es6-promise polyfill](https://github.com/stefanpenner/es6-promise).
79+
7780
## Gotchas for `require.ensure()`
7881

7982
### Empty Array as Parameter

content/guides/development.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ Each editor has a different way of disabling this. For the most common ones:
1818
* **Sublime Text 3** - Add `"atomic_save": false` to your user preferences.
1919
* **IntelliJ** - use search in the preferences to find "safe write" and disable it.
2020
* **Vim** - add `:set backupcopy=yes` in your settings.
21+
* **WebStorm** - uncheck `Use "safe write"` in Preferences > Appearance & Behavior > System Settings
2122

2223
## Source Maps
2324

content/guides/webpack-and-typescript.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ module.exports = {
116116
},
117117
{
118118
enforce: 'pre',
119-
test: /\.js$/,
119+
test: /\.tsx?$/,
120120
use: "source-map-loader"
121121
}
122122
]

0 commit comments

Comments
 (0)