Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/cn' into cn
Browse files Browse the repository at this point in the history
  • Loading branch information
dear-lizhihua committed Feb 6, 2017
2 parents 64edd20 + 3e1a0dd commit 2f5fca8
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 95 deletions.
6 changes: 3 additions & 3 deletions content/concepts/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ T> webpack 1 需要特定的 loader 来转换 ES 2015 `import`,然而通过 we

## 支持的模块类型

webpack 通过_加载器(loader)_可以支持各种语言和预处理器编写模块。_加载器_描述了 webpack **如何**处理 非 JavaScript(non-JavaScript) _模块_并且在_包_中引入这些_依赖_
webpack 社区已经为以及各种流行语言和语言处理器构建了_加载器_,包括:
webpack 通过 _loader_ 可以支持各种语言和预处理器编写模块。_loader_ 描述了 webpack **如何**处理 非 JavaScript(non-JavaScript) _模块_并且在_bundle_中引入这些_依赖_
webpack 社区已经为各种流行语言和语言处理器构建了 _loader_,包括:

* [CoffeeScript](http://coffeescript.org)
* [TypeScript](https://www.typescriptlang.org)
Expand All @@ -43,7 +43,7 @@ webpack 社区已经为以及各种流行语言和语言处理器构建了_加

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

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

***

Expand Down
26 changes: 13 additions & 13 deletions content/configuration/other-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,45 +13,45 @@ contributors:

`object`

Set the value of `require.amd` or `define.amd`:
设置 `require.amd` `define.amd` 的值:

```js
amd: {
jQuery: true
}
```

Certain popular modules written for AMD, most notably jQuery versions 1.7.0 to 1.9.1, will only register as an AMD module if the loader indicates it has taken [special allowances](https://github.com/amdjs/amdjs-api/wiki/jQuery-and-AMD) for multiple versions being included on a page.
The allowances were the ability to restrict registrations to a specific version or to support different sandboxes with different defined modules.
某些流行的模块是按照 AMD 规范编写的,最引人瞩目的 jQuery 版本在 1.7.0 1.9.1,如果 loader 提示它对页面包含的多个版本采取了[特殊许可](https://github.com/amdjs/amdjs-api/wiki/jQuery-and-AMD)时,才会注册为 AMD 模块。
许可权限是具有「限制指定版本注册」或「支持有不同定义模块的不同沙盒」的能力。

This option allows you to set the key your module looks for to a truthy value.
As it happens, the AMD support in webpack ignores the defined name anyways.
此选项允许将模块查找的键(key)设置为真值(truthy value)。
发生这种情况时,webpack 中的 AMD 支持将忽略定义的名称。


## `bail`

`boolean`

Fail out on the first error instead of tolerating it. By default webpack will log these errors in red in the terminal, as well as the browser console when using HMR, but continue bundling. To enable it:
在第一个错误出现时抛出失败结果,而不是容忍它。默认情况下,当使用 HMR 时,webpack 会将在终端以及浏览器控制台中,以红色文字记录这些错误,但仍然继续进行打包。要启用它:

```js
bail: true
```

This will force webpack to exit its bundling process.
这将迫使 webpack 退出其打包过程。


## `cache`

`boolean` `object`

Cache the generated webpack modules and chunks to improve build speed. Caching is enabled by default while in watch mode. To disable caching simply pass:
缓存生成的 webpack 模块和 chunk,来改善构建速度。缓存默认在观察模式(watch mode)启用。禁用缓存只需简单传入:

```js
cache: false
```

If an object is passed, webpack will use this object for caching. Keeping a reference to this object will allow one to share the same cache between compiler calls:
如果传递一个对象,webpack 将使用这个对象进行缓存。保持对此对象的引用,将可以在 compiler 调用之间共享同一缓存:

```js
let SharedCache = {};
Expand All @@ -62,15 +62,15 @@ export default {
}
```

W> Don't share the cache between calls with different options.
W> 不要在不同选项的调用之间共享缓存。

?> Elaborate on the warning and example - calls with different configuration options?

## `loader`

`object`

Expose custom values into the loader context.
loader 上下文中暴露自定义值。

?> Add an example...

Expand All @@ -79,9 +79,9 @@ Expose custom values into the loader context.

`boolean`

Capture a "profile" of the application, including statistics and hints, which can then be dissected using the [Analyze](https://webpack.github.io/analyse/) tool.
捕获一个应用程序"配置文件",包括统计和提示,然后可以使用 [Analyze](https://webpack.github.io/analyse/) 工具进行详细分析。

T> Use the [StatsPlugin](https://www.npmjs.com/package/stats-webpack-plugin) for more control over the generated profile.
T> 使用 [StatsPlugin](https://www.npmjs.com/package/stats-webpack-plugin) 可以更好地控制生成的配置文件。


## `recordsPath`
Expand Down
61 changes: 30 additions & 31 deletions content/guides/code-splitting-libraries.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 代码拆分 - Libraries
title: 代码拆分 - 库(Libraries)
sort: 32
contributors:
- pksjce
Expand All @@ -8,20 +8,19 @@ contributors:
- rafde
- bartushek
---
一个典型的应用程序会使用第三方框架、工具库。这些库一般使用特定的版本并且其代码不经常改变。然而,应用本身的代码会频繁改变。

A typical application uses third party libraries for framework/functionality needs. Particular versions of these libraries are used and code here does not change often. However, the application code changes frequently.
把第三方代码和应用本身的代码一起打包是非常低效的。因为浏览器会根据缓存头来缓存资源文件,如果文件没有被改变,文件将会被缓存从而不用去再次请求 cdn。为了利用这一特性,我们希望不管应用本身的代码如何改变,vendor 文件的 hash 始终恒定不变。

Bundling application code with third party code would be inefficient. This is because the browser can cache asset files based on the cache header and files can be cached without needing to call the cdn again if its contents don't change. To take advantage of this, we want to keep the hash of the vendor files constant regardless of application code changes.
只有当我们把 vendor 和应用代码的 bundle 分离时,才能实现这一点。

We can do this only when we separate the bundles for vendor and application code.
让我们考虑一个使用了 [momentjs](https://www.npmjs.com/package/moment)(一种常用的时间格式化库)的示例应用程序。

Let's consider a sample application that uses [momentjs](https://www.npmjs.com/package/moment), a commonly used time formatting library.

Install `moment` as follows in your application directory.
在你的应用路径下安装 `moment`,如下:

`npm install --save moment`

The index file will require `moment` as a dependency and log the current date as follows
index.js 文件会引用 `moment` 并且输出当前的时间,代码如下:

__index.js__
```javascript
Expand All @@ -30,7 +29,7 @@ console.log(moment().format());

```

We can bundle the application with webpack using the following config
我们可以用 webpack 通过如下的配置来打包(bundle)该应用:

__webpack.config.js__

Expand All @@ -48,13 +47,13 @@ module.exports = function(env) {
}
```

On running `webpack` in your application, if you inspect the resulting bundle, you will see that `moment` and `index.js` have been bundled in `bundle.js`.
在项目中运行 `webpack`,如果你查看生成的包,会发现 `moment` `index.js` 都被打包进了 `bundle.js`

This is not ideal for the application. If the code in `index.js` changes, then the whole bundle is rebuilt. The browser will have to load a new copy of the new bundle even though most of it hasn't changed at all.
这对于该应用来说是很不理想的。如果 `index.js` 中的代码改变了,那么整个 bundle 都会重新构建。浏览器就需要加载新的 bundle,即使其中大部分代码都没改变。

## Multiple Entries
## 多入口

Let's try to mitigate this by adding a separate entry point for `moment` and name it `vendor`
让我们尝试通过为 `moment` 添加一个单独的入口点并将其命名为 `vendor` 来缓解这一情况。

__webpack.config.js__

Expand All @@ -75,15 +74,15 @@ module.exports = function(env) {
}
```

On running `webpack` now, we see that two bundles have been created. If you inspect these though, you will find that the code for `moment` is present in both the files!
再次运行 `webpack`,可以发现生成了两个 bundle。然而如果查看他们的代码,会发现 `moment` 的代码在两个文件中都出现了!

It is for this reason, that we will need to use the [CommonsChunkPlugin](/plugins/commons-chunk-plugin).
正是由于这个原因,我们需要使用 [CommonsChunkPlugin](/plugins/commons-chunk-plugin)

## `CommonsChunkPlugin`

This is a pretty complex plugin. It fundamentally allows us to extract all the common modules from different bundles and add them to the common bundle. If a common bundle does not exist, then it creates a new one.
这是一个非常复杂的插件。它从根本上允许我们从不同的 bundle 中提取所有的公共模块,并且将他们加入公共 bundle 中。如果公共 bundle 不存在,那么它将会创建一个出来。

We can modify our webpack config file to use the `CommonsChunkPlugin` as follows
我们可以通过修改 webpack 配置文件来使用 `CommonsChunkPlugin`,代码如下:

__webpack.config.js__

Expand All @@ -103,18 +102,18 @@ module.exports = function(env) {
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor' // Specify the common bundle's name.
name: 'vendor' // 指定公共 bundle 的名字。
})
]
}
}
```
Now run `webpack` on your application. Bundle inspection shows that `moment` code is present only in the vendor bundle.

## Implicit Common Vendor Chunk
现在运行 `webpack`。查看结果会发现 `moment` 代码只会出现在 vendor bundle 中。

You can configure a `CommonsChunkPlugin` instance to only accept vendor libraries.
## 隐式公共 vendor chunk

你可以将 `CommonsChunkPlugin` 配置为只接受 vendor 库。

__webpack.config.js__

```javascript
Expand All @@ -134,23 +133,23 @@ module.exports = function() {
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// this assumes your vendor imports exist in the node_modules directory
// 该配置假定你引入的 vendor 存在于 node_modules 目录中
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
]
};
}
```
## Manifest 文件

## Manifest File
但是,如果我们改变应用的代码并且再次运行 `webpack`,可以看到 vendor 文件的 hash 改变了。即使我们把 `vendor``main` 的 bundle 分开了,也会发现 `vendor` bundle 会随着应用代码改变。

But, if we change application code and run `webpack` again, we see that the hash for the vendor file changes. Even though we achieved separate bundles for `vendor` and `main` bundles, we see that the `vendor` bundle changes when the application code changes.
This means that we still don't reap the benefits of browser caching because the hash for vendor file changes on every build and the browser will have to reload the file.
这意味着我们任然无法从浏览器缓存机制中受益,因为 vendor 的 hash 在每次构建中都会改变,浏览器也必须重新加载文件。

The issue here is that on every build, webpack generates some webpack runtime code, which helps webpack do it's job. When there is a single bundle, the runtime code resides in it. But when multiple bundles are generated, the runtime code is extracted into the common module, here the `vendor` file.
这里的问题在于,每次构建时,webpack 生成了一些 webpack runtime 代码,用来帮助 webpack 完成其工作。当只有一个 bundle 的时候,runtime 代码驻留在其中。但是当生成多个 bundle 的时候,运行时代码被提取到了公共模块中,在这里就是 `vendor` 文件。

To prevent this, we need extract out the runtime into a separate manifest file. Even though we are creating another bundle, the overhead is offset by the long term caching benefits that we obtain on the `vendor` file.
为了防止这种情况,我们需要将运行时代码提取到一个单独的 manifest 文件中。尽管我们又创建了另一个 bundle,其开销也被我们在 `vendor` 文件的长期缓存中获得的好处所抵消。

__webpack.config.js__

Expand All @@ -170,16 +169,16 @@ module.exports = function(env) {
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'] // Specify the common bundle's name.
names: ['vendor', 'manifest'] // 指定公共 bundle 的名字。
})
]
}
};
```

With the above webpack config, we see three bundles being generated. `vendor`, `main` and `manifest` bundles.
使用上面的 webpack 配置,我们看到生成了三个bundle:`vendor``main``manifest`

T> Note that long-term bundle caching is achieved with content-based hashing policy `chunkhash`. Learn more about [caching](/guides/caching/).
T> 注意,长效的 bundle 缓存是通过“基于内容的 hash 策略”来实现的(content-based hashing)。查阅更多关于[缓存](/guides/caching/)

***

Expand Down
Loading

0 comments on commit 2f5fca8

Please sign in to comment.