Skip to content

update master #404

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

Merged
merged 50 commits into from
Nov 12, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
f2a258a
update /content/loaders & /content/plugins
dear-lizhihua Sep 3, 2017
a5725bb
Merge remote-tracking branch 'upstream/translation' into translation
dear-lizhihua Sep 3, 2017
248be26
update /content/loaders & /content/plugins
dear-lizhihua Sep 19, 2017
36c53b8
Merge remote-tracking branch 'upstream/translation' into translation
dear-lizhihua Sep 19, 2017
25a3d6d
Merge branch 'master' into cn
dear-lizhihua Oct 10, 2017
14bff9f
update /content/loaders & /content/plugins
dear-lizhihua Oct 10, 2017
debfddd
Merge remote-tracking branch 'upstream/cn' into cn
dear-lizhihua Oct 10, 2017
57fb4d4
update contributors
dear-lizhihua Oct 10, 2017
99bf48d
Merge branch 'master' into translation
dear-lizhihua Oct 10, 2017
7fcd796
Merge remote-tracking branch 'upstream/translation' into translation
dear-lizhihua Oct 11, 2017
78e3cee
update /content/loaders & /content/plugins
dear-lizhihua Oct 15, 2017
8a1b2c9
Merge branch 'master' into translation
dear-lizhihua Oct 15, 2017
34575cd
Merge remote-tracking branch 'upstream/translation' into translation
dear-lizhihua Oct 15, 2017
3251e8a
Merge remote-tracking branch 'upstream/cn' into cn
dear-lizhihua Oct 15, 2017
7396c0d
Merge branch 'master' into cn
dear-lizhihua Oct 15, 2017
c0dc1be
fix LinkDropdown
dear-lizhihua Oct 15, 2017
4809e4a
Merge branch 'translation' into cn
dear-lizhihua Oct 15, 2017
178eeeb
修复 npm 命令错误导致编译不成功的问题
dear-lizhihua Oct 17, 2017
8ec33ad
update /content/loaders & /content/plugins
dear-lizhihua Oct 17, 2017
cc7b5e1
Merge remote-tracking branch 'upstream/translation' into translation
dear-lizhihua Oct 17, 2017
93ebe40
Merge remote-tracking branch 'upstream/cn' into cn
dear-lizhihua Oct 29, 2017
1ca293a
update /content/loaders & /content/plugins
dear-lizhihua Oct 30, 2017
a132154
Merge branch 'master' into translation
dear-lizhihua Oct 30, 2017
9fbf758
Merge remote-tracking branch 'upstream/translation' into translation
dear-lizhihua Oct 30, 2017
a40704a
update /content/loaders & /content/plugins
dear-lizhihua Nov 1, 2017
53d47d1
Merge remote-tracking branch 'upstream/translation' into translation
dear-lizhihua Nov 1, 2017
68c4bdd
Merge remote-tracking branch 'upstream/cn' into cn
dear-lizhihua Nov 1, 2017
d622470
docs(plugins): fix typo in module-concatenation-plugin.md (#1683)
mattdsteele Nov 1, 2017
52eb2a4
docs(concepts): simplify the introduction (#1673)
TheDutchCoder Nov 1, 2017
6e8d65d
docs(plugins): add “scope hoisting” intro in module-concatenation-plu…
iamakulov Nov 3, 2017
66443e6
docs(api): fix some method signatures in loaders.md (#1685)
aparajita Nov 3, 2017
b13613e
update /content/loaders & /content/plugins
Nov 4, 2017
0e407de
Merge remote-tracking branch 'upstream/translation' into translation
Nov 4, 2017
d6295cc
Merge remote-tracking branch 'upstream/master'
Nov 4, 2017
955b221
docs(guides): consistent quoute use in typescript.md (#1687)
ulrikstrid Nov 5, 2017
ac739ee
docs(api/guides): document new --concatenate-modules flag (#1686)
iamakulov Nov 5, 2017
6d30cac
docs(guides): fix issues with examples in shimming.md (#1680)
svyandun Nov 5, 2017
ccac872
docs(guides): add middleware tip to the hmr guide
skipjack Nov 5, 2017
5dcd8ac
Merge remote-tracking branch 'upstream/cn' into cn
dear-lizhihua Nov 5, 2017
0f539cb
Merge remote-tracking branch 'upstream/master'
dear-lizhihua Nov 5, 2017
c71abf9
Merge remote-tracking branch 'upstream/cn' into cn
dear-lizhihua Nov 5, 2017
c9cdb7e
Revert "A new --concatenate-modules flag" (#1692)
skipjack Nov 5, 2017
ebd64c9
update master
dear-lizhihua Nov 6, 2017
796d087
Merge remote-tracking branch 'upstream/master'
dear-lizhihua Nov 6, 2017
4a2422b
Merge branch 'master' into cn
dear-lizhihua Nov 6, 2017
fe130ff
update master
dear-lizhihua Nov 6, 2017
19fc4f6
update /content/loaders & /content/plugins
dear-lizhihua Nov 7, 2017
b9d59a4
Merge remote-tracking branch 'upstream/translation' into translation
dear-lizhihua Nov 7, 2017
38fc0d4
Merge branch 'translation' into cn
dear-lizhihua Nov 7, 2017
63574ba
fix bugs
dear-lizhihua Nov 12, 2017
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
4 changes: 2 additions & 2 deletions src/content/api/loaders.md
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ T> loader 最初被设计为可以同时当 Babel transform 用。如果你编
### `this.emitWarning`

```typescript
emitWarning(message: string)
emitWarning(warning: Error)
```

发出一个警告。
Expand All @@ -270,7 +270,7 @@ emitWarning(message: string)
### `this.emitError`

```typescript
emitError(message: string)
emitError(error: Error)
```

发出一个错误。
Expand Down
58 changes: 31 additions & 27 deletions src/content/concepts/index.md
Original file line number Diff line number Diff line change
@@ -1,47 +1,53 @@
---
title: 核心概念
title: 概念
sort: 1
contributors:
- TheLarkInn
- jhnns
- grgur
- johnstew
- jimrfenner
- TheDutchCoder
---

*webpack* 是一个现代 JavaScript 应用程序的_模块打包器(module bundler)_。当 webpack 处理应用程序时,它会递归地构建一个_依赖关系图(dependency graph)_,其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 _bundle_ - 通常只有一个,由浏览器加载
本质上,*webpack* 是一个现代 JavaScript 应用程序的_模块打包器(module bundler)_。当 webpack 处理应用程序时,它会递归地构建一个_依赖关系图(dependency graph)_,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 _bundle_。

它是[高度可配置的](/configuration),但是,在开始前你需要先理解**四个核心概念**:入口(entry)、输出(output)、loader、插件(plugins)。
它是[高度可配置的](/configuration),但是,在开始前你需要先理解四个**核心概念**:

- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)

本文档旨在给出这些概念的**高度**概述,同时提供具体概念的详尽相关用例。


## 入口(Entry)
## 入口(entry)

webpack 创建应用程序所有依赖的关系图(dependency graph)。图的起点被称之为_入口起点(entry point)_。_入口起点_告诉 webpack _从哪里开始_,并根据依赖关系图确定_需要打包的内容_。可以将应用程序的_入口起点_认为是**根上下文(contextual root)** 或 **app 第一个启动文件**
**入口起点(entry point)**指示 webpack 应该使用哪个模块,来作为构建其内部*依赖图*的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的

在 webpack 中,我们使用 [webpack 配置对象(webpack configuration object)](/configuration) 中的 `entry` 属性来定义_入口_
每个依赖项随即被处理,最后输出到称之为 *bundles* 的文件中,我们将在下一章节详细讨论这个过程

接下来我们看一个最简单的例子:
可以通过在 [webpack 配置](/configuration)中配置 `entry` 属性,来指定一个入口起点(或多个入口起点)。

**webpack.config.js**
接下来我们看一个 `entry` 配置的最简单例子:

```javascript
__webpack.config.js__

``` js
module.exports = {
entry: './path/to/my/entry/file.js'
};
```

根据不同应用程序的需要,声明 `entry` 属性有多种方式
T> 根据应用程序的特定需求,可以以多种方式配置 `entry` 属性。从[入口起点](/concepts/entry-points)章节可以了解更多信息

[了解更多!](/concepts/entry-points)

## 出口(output)

## 出口(Output)
**output** 属性告诉 webpack 在哪里输出它所创建的 *bundles*,以及如何命名这些文件。你可以通过在配置中指定一个 `output` 字段,来配置这些处理过程:

将所有的资源(assets)归拢在一起后,还需要告诉 webpack **在哪里**打包应用程序。webpack 的 `output` 属性描述了**如何处理归拢在一起的代码**(bundled code)。

**webpack.config.js**
__webpack.config.js__

```javascript
const path = require('path');
Expand All @@ -59,20 +65,18 @@ module.exports = {

T> 你可能看到项目**生成(emitted 或 emit)**贯穿我们整个文档和[插件 API](/api/plugins)。它是“生产(produced)”或“排放(discharged)”的特殊术语。

`output` 属性还有[更多可配置的特性](/configuration/output),但让我们花一些时间先了解一些 `output` 属性最常见的用例。

[了解更多!](/concepts/output)
T> `output` 属性还有[更多可配置的特性](/configuration/output),如果你想要了解更多关于 `output` 属性的概念,你可以通过[阅读核心章节]more in the concepts section](/concepts/output)来了解更多。


## Loader
## loader

webpack 的目标是,让 **webpack** 聚焦于项目中的所有资源(asset),而浏览器不需要关注考虑这些(明确的说,这并不意味着所有资源(asset)都必须打包在一起)。webpack 把[每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块](/concepts/modules)处理。然而 webpack 自身**只理解 JavaScript**
*loader* 能够让 webpack 额外去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为有效的[模块](/concepts/modules),然后再利用 webpack 的打包能力,对它们进行处理

**webpack loader 在文件被添加到依赖图中时,_其转换为模块_。**
本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图可以直接引用的模块。

在更高层面,在 webpack 的配置中 **loader** 有两个目标。

1. 识别出(identify)应该被对应的 loader 进行转换(transform)的那些文件。(`test` 属性)
1. 识别出应该被对应的 loader 进行转换的那些文件。(使用 `test` 属性)
2. 转换这些文件,从而使其能够被添加到依赖图中(并且最终添加到 bundle 中)(`use` 属性)

**webpack.config.js**
Expand Down Expand Up @@ -107,17 +111,17 @@ loader 还有更多我们尚未提到的具体配置属性。
[了解更多!](/concepts/loaders)


## 插件(Plugins)
## 插件(plugins)

然而由于 loader 仅在每个文件的基础上执行转换,而 `插件(plugins)` 更常用于(但不限于)在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能[(查看更多)](/concepts/plugins)。webpack 的插件系统[极其强大和可定制化](/api/plugins)。
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。[插件接口](/api/plugins)功能极其强大,可以用来处理各种各样的任务

想要使用一个插件,你只需要 `require()` 它,然后把它添加到 `plugins` 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 `new` 来创建它的一个实例
想要使用一个插件,你只需要 `require()` 它,然后把它添加到 `plugins` 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 `new` 操作符来创建它的一个实例

**webpack.config.js**

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');

const config = {
Expand Down
2 changes: 2 additions & 0 deletions src/content/guides/hot-module-replacement.md
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,8 @@ server.listen(5000, 'localhost', () => {
});
```

T> If you're [using `webpack-dev-middleware`](/guides/development#using-webpack-dev-middleware), check out the [`webpack-hot-middleware`](https://github.com/glenjamin/webpack-hot-middleware) package to enable HMR on your custom dev server.


## 问题

Expand Down
10 changes: 8 additions & 2 deletions src/content/guides/shimming.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ contributors:
- jhnns
- simon04
- jeremenichelli
- svyandun
related:
- title: Reward modern browser users script
url: https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7#c665
Expand Down Expand Up @@ -65,6 +66,7 @@ __webpack.config.js__

``` diff
const path = require('path');
+ const webpack = require('webpack');

module.exports = {
entry: './src/index.js',
Expand All @@ -75,7 +77,7 @@ __webpack.config.js__
+ },
+ plugins: [
+ new webpack.ProvidePlugin({
+ lodash: 'lodash'
+ _: 'lodash'
+ })
+ ]
};
Expand Down Expand Up @@ -112,6 +114,7 @@ __webpack.config.js__

``` diff
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: './src/index.js',
Expand All @@ -121,7 +124,7 @@ __webpack.config.js__
},
plugins: [
new webpack.ProvidePlugin({
- lodash: 'lodash'
- _: 'lodash'
+ join: ['lodash', 'join']
})
]
Expand Down Expand Up @@ -156,6 +159,7 @@ __webpack.config.js__

``` diff
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: './src/index.js',
Expand Down Expand Up @@ -213,6 +217,7 @@ __webpack.config.js__

``` diff
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: './src/index.js',
Expand Down Expand Up @@ -323,6 +328,7 @@ __webpack.config.js__

``` diff
const path = require('path');
const webpack = require('webpack');

module.exports = {
- entry: './src/index.js',
Expand Down
4 changes: 2 additions & 2 deletions src/content/guides/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ module.exports = {
]
},
resolve: {
extensions: [ ".tsx", ".ts", ".js" ]
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'bundle.js',
Expand Down Expand Up @@ -139,7 +139,7 @@ __webpack.config.js__
]
},
resolve: {
extensions: [ ".tsx", ".ts", ".js" ]
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'bundle.js',
Expand Down
30 changes: 13 additions & 17 deletions src/content/loaders/babel-loader.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,16 @@ __Notes:__ Issues with the output should be reported on the babel [issue tracker

## 安装

> webpack 1.x | babel-loader <= 6.x
>
> webpack 2.x | babel-loader >= 7.x (推荐)(^6.2.10 也可以运行,但会有不赞成的警告(deprecation warnings))
>
> webpack 3.x | babel-loader >= 7.1
> webpack 3.x | babel-loader 8.x | babel 7.x

```bash
yarn add babel-loader babel-core babel-preset-env webpack --dev
npm install babel-loader@8.0.0-beta.0 @babel/core@next @babel/preset-env@next webpack
```

我们推荐您使用 yarn,但还是可以使用 npm:
> webpack 3.x babel-loader 7.x | babel 6.x

```bash
npm install --save-dev babel-loader babel-core babel-preset-env webpack
npm install babel-loader babel-core babel-preset-env webpack
```

## 用法
Expand All @@ -43,7 +39,7 @@ module: {
use: {
loader: 'babel-loader',
options: {
presets: ['env']
presets: ['@babel/preset-env']
}
}
}
Expand All @@ -67,8 +63,8 @@ module: {
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
plugins: [require('babel-plugin-transform-object-rest-spread')]
presets: ['@babel/preset-env'],
plugins: [require('@babel/plugin-transform-object-rest-spread')]
}
}
}
Expand Down Expand Up @@ -119,8 +115,8 @@ rules: [
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
plugins: ['transform-runtime']
presets: ['@babel/preset-env'],
plugins: ['@babel/transform-runtime']
}
}
}
Expand All @@ -142,7 +138,7 @@ rules: [
下面这样的写法也没有作用:

```javascript
require('babel-runtime/core-js/promise').default = require('bluebird');
require('@babel/runtime/core-js/promise').default = require('bluebird');

var promise = new Promise;
```
Expand All @@ -152,9 +148,9 @@ var promise = new Promise;
```javascript
'use strict';

var _Promise = require('babel-runtime/core-js/promise')['default'];
var _Promise = require('@babel/runtime/core-js/promise')['default'];

require('babel-runtime/core-js/promise')['default'] = require('bluebird');
require('@babel/runtime/core-js/promise')['default'] = require('bluebird');

var promise = new _Promise();
```
Expand All @@ -166,7 +162,7 @@ var promise = new _Promise();
```javascript
// bootstrap.js

require('babel-runtime/core-js/promise').default = require('bluebird');
require('@babel/runtime/core-js/promise').default = require('bluebird');

// ...

Expand Down
2 changes: 1 addition & 1 deletion src/content/loaders/bundle-loader.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ module.exports = {
{
test: /\.bundle\.js$/,
use: {
loader: 'bundle-loader'
loader: 'bundle-loader',
options: {
name: 'my-chunk'
}
Expand Down
3 changes: 2 additions & 1 deletion src/content/loaders/i18n-loader.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ locale(function() {

### 配置

如果想要一次加载然后可以同步地使用,你应该告诉 loader 所有要使用的地区。
如果想要一次加载然后可以同步地使用,
你应该告诉 loader 所有要使用的地区。

``` javascript
{
Expand Down
2 changes: 1 addition & 1 deletion src/content/loaders/postcss-loader.md
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ either add the css-loader’s [`importLoaders`] option.

or use [postcss-modules] instead of `css-loader`.

[`importLoaders`]: https://github.com/webpack-contrib/css-loader#importing-and-chained-loaders
[`importLoaders`]: https://github.com/webpack-contrib/css-loader#importloaders
[cannot be used]: https://github.com/webpack/css-loader/issues/137
[CSS Modules]: https://github.com/webpack/css-loader#css-modules
[postcss-modules]: https://github.com/outpunk/postcss-modules
Expand Down
Loading