@@ -47,4 +50,7 @@ const Splash = () => (
);
+Splash.title = 'webpack 中文文档';
+Splash.description = 'webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。';
+
export default Splash;
diff --git a/src/components/StarterKits/StarterKits.jsx b/src/components/StarterKits/StarterKits.jsx
index 1de6197d671c..ac73d7efeb71 100755
--- a/src/components/StarterKits/StarterKits.jsx
+++ b/src/components/StarterKits/StarterKits.jsx
@@ -10,7 +10,7 @@ import './StarterKits.scss';
// can use. This component could even use something like griddle
// to allow sorting and such.
-export default props => (
+const StarterKits = props => (
起步配套工具
@@ -70,3 +70,7 @@ export default props => (
);
+
+StarterKits.title = 'Starter Kits';
+
+export default StarterKits;
diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index 2890af4772c5..0d59c282fc1d 100755
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -1,15 +1,30 @@
import React from 'react';
-import GoldSponsors from './support-goldsponsors.json';
-import SilverSponsors from './support-silversponsors.json';
-import Sponsors from './support-sponsors.json';
import Backers from './support-backers.json';
import Additional from './support-additional.js';
import './Support.scss';
+const SUPPORTERS = [ ...Backers ];
+
+// merge or add additional backers/sponsors
+for(const additional of Additional) {
+ const existing = SUPPORTERS.find(supporter => supporter.slug && supporter.slug === additional.slug);
+ if (existing) {
+ existing.totalDonations += additional.totalDonations;
+ } else {
+ SUPPORTERS.push(additional);
+ }
+}
+
+// resort list
+SUPPORTERS.sort((a, b) => b.totalDonations - a.totalDonations);
+
const ranks = {
backer: {
maximum: 200
},
+ latest: {
+ maxAge: 14 * 24 * 60 * 60 * 1000
+ },
bronze: {
minimum: 200,
maximum: 2000
@@ -38,31 +53,14 @@ function formatMoney(number) {
export default class Support extends React.Component {
render() {
let { rank } = this.props;
- let supporters = [
- ...GoldSponsors,
- ...SilverSponsors,
- ...Sponsors,
- ...Backers,
- ];
- // merge or add additional backers/sponsors
- for(const additional of Additional) {
- const existing = supporters.find(supporter => supporter.username && supporter.username === additional.username);
- if (existing) {
- existing.totalDonations += additional.totalDonations;
- } else {
- supporters.push(additional);
- }
- }
-
- // resort list
- supporters.sort((a, b) => b.totalDonations - a.totalDonations);
-
- let minimum, maximum;
+ let supporters = SUPPORTERS;
+ let minimum, maximum, maxAge;
if (rank && ranks[rank]) {
minimum = ranks[rank].minimum;
maximum = ranks[rank].maximum;
+ maxAge = ranks[rank].maxAge;
}
if (typeof minimum === 'number') {
@@ -73,6 +71,11 @@ export default class Support extends React.Component {
supporters = supporters.filter(item => item.totalDonations < maximum * 100);
}
+ if (typeof maxAge === 'number') {
+ const now = Date.now();
+ supporters = supporters.filter(item => item.firstDonation && (now - new Date(item.firstDonation).getTime() < maxAge));
+ }
+
return (
@@ -80,6 +83,8 @@ export default class Support extends React.Component {
The following Backers are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions.
+ ) : rank === 'latest' ? (
+
The following persons/organizations made their first donation in the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days.
) : (
{ rank } sponsors
@@ -90,16 +95,16 @@ export default class Support extends React.Component {
{
supporters.map((supporter, index) => (
-
+ href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
{ supporter.avatar ? :
- supporter.name }
+ alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' } /> :
+ {supporter.name || supporter.slug} }
{ rank === 'backer' ? : null }
))
diff --git a/src/components/Support/Support.scss b/src/components/Support/Support.scss
index 476abccdbac4..819046df97ac 100755
--- a/src/components/Support/Support.scss
+++ b/src/components/Support/Support.scss
@@ -22,6 +22,11 @@
margin: 0 2px 2px 2px;
}
+ &__latest-avatar {
+ height: 64px;
+ max-width: 192px;
+ }
+
&__bronze-avatar {
height: 32px;
max-width: 96px;
@@ -41,6 +46,7 @@
}
&__backer-avatar {
+ display: inline-block;
width: 31px;
height: 31px;
border-radius: 50%;
diff --git a/src/components/Support/support-additional.js b/src/components/Support/support-additional.js
index 17ef3d34340e..b6ebcbeda748 100644
--- a/src/components/Support/support-additional.js
+++ b/src/components/Support/support-additional.js
@@ -21,7 +21,7 @@ export default [
reason: "Paypal"
},
{
- username: "peerigon",
+ slug: "peerigon",
name: "Peerigon",
avatar: "https://opencollective-production.s3-us-west-1.amazonaws.com/e8a1de10-99c8-11e6-8650-f92e594d5de8.png",
website: "https://peerigon.com/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship",
diff --git a/src/components/Vote/List.jsx b/src/components/Vote/Vote.jsx
similarity index 85%
rename from src/components/Vote/List.jsx
rename to src/components/Vote/Vote.jsx
index da1aeda25992..c93c910dae16 100755
--- a/src/components/Vote/List.jsx
+++ b/src/components/Vote/Vote.jsx
@@ -3,12 +3,12 @@ import Interactive from 'antwar-interactive';
import Container from '../Container/Container';
import VoteApp from './App';
import '../../styles';
-import './List.scss';
+import './Vote.scss';
import './App.scss';
import './Influence.scss';
import './Button/Button.scss';
-export default ({ section, page }) => {
+const Vote = ({ section, page }) => {
let arr = page.url.split('/');
let name = arr[arr.length - 1];
@@ -25,3 +25,7 @@ export default ({ section, page }) => {
);
};
+
+Vote.title = 'Vote';
+
+export default Vote;
diff --git a/src/components/Vote/List.scss b/src/components/Vote/Vote.scss
similarity index 100%
rename from src/components/Vote/List.scss
rename to src/components/Vote/Vote.scss
diff --git a/src/content/analyze.md b/src/content/analyze.md
index c9e025a15cb2..e69de29bb2d1 100755
--- a/src/content/analyze.md
+++ b/src/content/analyze.md
@@ -1,9 +0,0 @@
----
-title: 分析工具
----
-
-Analyze content should go here.
-
-***
-
-> 原文：https://webpack.js.org/analyze/
\ No newline at end of file
diff --git a/src/content/api/cli.md b/src/content/api/cli.md
index 63279844eddd..85f4c104f6ff 100755
--- a/src/content/api/cli.md
+++ b/src/content/api/cli.md
@@ -1,5 +1,5 @@
---
-title: 命令行接口(CLI)
+title: 命令行接口(Command Line Interface)
sort: 2
contributors:
- ev1stensberg
@@ -17,11 +17,9 @@ related:
url: https://medium.com/@nimgrg/analysing-and-minimising-the-size-of-client-side-bundle-with-webpack-and-source-map-explorer-41096559beca#.c3t2srr8x
---
-webpack 提供了命令行接口（CLI），以便对构建过程进行配置和交互。这对于制定早期原型、轮廓、编写 npm 脚本 或者一些个人自定义需求很有用。
-
为了更合适且方便地使用配置，可以在 `webpack.config.js` 中对 webpack 进行配置。CLI 中传入的任何参数会在配置文件中映射为对应的参数。
-如果你的 webpack 尚未开始配置，请查看[安装指南](/guides/installation)。
+如果你还没有安装 webpack，请查看[安装指南](/guides/installation)。
T> webpack 的新 CLI 正在开发中。正在添加新功能，例如 `--init` 参数。[查看详情！](https://github.com/webpack/webpack-cli)
diff --git a/src/content/api/plugins/compilation.md b/src/content/api/compilation.md
similarity index 68%
rename from src/content/api/plugins/compilation.md
rename to src/content/api/compilation.md
index c0b6321aa0b6..1d065b872779 100755
--- a/src/content/api/plugins/compilation.md
+++ b/src/content/api/compilation.md
@@ -1,72 +1,81 @@
---
title: Compilation
+group: Plugins
sort: 3
---
Compilation 实例继承于 compiler。例如，compiler.compilation 是对所有 require 图(graph)中对象的字面上的编译。这个对象可以访问所有的模块和它们的依赖（大部分是循环依赖）。在编译阶段，模块被加载，封闭，优化，分块，哈希和重建等等。这将是编译中任何操作主要的生命周期。
-```javascript
+``` js
compiler.plugin("compilation", function(compilation) {
- //主要的编译实例
- //随后所有的方法都从 compilation.plugin 上得来
+ // 主要的编译实例
+ // 随后所有的方法都从 compilation.plugin 上得来
});
```
+
## `normal-module-loader`
普通模块 loader，真实地一个一个加载模块图(graph)中所有的模块的函数。
-```javascript
+``` js
compilation.plugin('normal-module-loader', function(loaderContext, module) {
- //这里是所以模块被加载的地方
- //一个接一个，此时还没有依赖被创建
+ // 这里是所以模块被加载的地方
+ // 一个接一个，此时还没有依赖被创建
});
```
+
## `seal`
编译的封闭已经开始。
-```javascript
+``` js
compilation.plugin('seal', function() {
- //你已经不能再接收到任何模块
- //没有参数
+ // 你已经不能再接收到任何模块
+ // 没有参数
});
```
+
## `optimize`
优化编译。
-```javascript
+``` js
compilation.plugin('optimize', function() {
- //webpack 已经进入优化阶段
- //没有参数
+ // webpack 已经进入优化阶段
+ // 没有参数
});
```
+
## `optimize-tree(chunks, modules)` 异步
树的异步优化。
-```javascript
+``` js
compilation.plugin('optimize-tree', function(chunks, modules) {
});
```
-#### `optimize-modules(modules: Module[])`
+### `optimize-modules(modules: Module[])`
+
模块的优化。
-```javascript
+
+``` js
compilation.plugin('optimize-modules', function(modules) {
- //树优化期间处理模块数组
+ // 树优化期间处理模块数组
});
```
+
## `after-optimize-modules(modules: Module[])`
模块优化已经结束。
+
## `optimize-chunks(chunks: Chunk[])`
块的优化。
@@ -78,9 +87,9 @@ compilation.plugin('optimize-chunks', function(chunks) {
// 这里一般只有一个块，
// 除非你在配置中指定了多个入口
chunks.forEach(function (chunk) {
- // chunk 含有模块的循环引用
+ // Chunks have circular references to their modules
chunk.modules.forEach(function (module){
- // module.loaders, module.rawRequest, module.dependencies 等。
+ // module.loaders, module.rawRequest, module.dependencies, etc.
});
});
});
@@ -88,67 +97,83 @@ compilation.plugin('optimize-chunks', function(chunks) {
## `after-optimize-chunks(chunks: Chunk[])`
-块的优化已经结束。
+Optimizing the chunks has finished.
+
## `revive-modules(modules: Module[], records)`
-从记录中重建模块信息。
+Restore module info from records.
+
## `optimize-module-order(modules: Module[])`
-按模块重要性重新排序，第一个模块是最重要的模块，将得到最小的 id。
+Sort the modules in order of importance. The first is the most important module. It will get the smallest id.
+
## `optimize-module-ids(modules: Module[])`
-优化模块的 id。
+Optimize the module ids.
+
## `after-optimize-module-ids(modules: Module[])`
-模块 id 优化已经结束。
+Optimizing the module ids has finished.
+
## `record-modules(modules: Module[], records)`
-存储模块信息到记录。
+Store module info to the records.
+
## `revive-chunks(chunks: Chunk[], records)`
-从记录中重建 chunk 的信息。
+Restore chunk info from records.
+
## `optimize-chunk-order(chunks: Chunk[])`
-按块重要性重新排序，第一个 chunk 是最重要的模块，将得到最小的 id。
+Sort the chunks in order of importance. The first is the most important chunk. It will get the smallest id.
+
## `optimize-chunk-ids(chunks: Chunk[])`
-优化 chunk 的 id。
+Optimize the chunk ids.
+
## `after-optimize-chunk-ids(chunks: Chunk[])`
-chunk id 优化已经结束。
+Optimizing the chunk ids has finished.
+
## `record-chunks(chunks: Chunk[], records)`
-存储块信息到记录。
+Store chunk info to the records.
+
## `before-hash`
-编译开始哈希前。
+Before the compilation is hashed.
+
## `after-hash`
-编译哈希后。
+After the compilation is hashed.
+
## `before-chunk-assets`
-创建 chunk 生成资源前。
+Before creating the chunk assets.
+
## `additional-chunk-assets(chunks: Chunk[])`
-为 chunk 创建附加的生成资源。
+Create additional assets for the chunks.
+
## `record(compilation, records)`
-存储编译信息到记录。
+Store info about the compilation to the records
+
## `additional-assets` async
@@ -156,7 +181,7 @@ Create additional assets for the compilation
Here's an example that downloads an image.
-```javascript
+``` js
compiler.plugin('compilation', function(compilation) {
compilation.plugin('additional-assets', function(callback) {
download('https://img.shields.io/npm/v/webpack.svg', function(resp) {
@@ -171,6 +196,7 @@ compiler.plugin('compilation', function(compilation) {
});
```
+
## `optimize-chunk-assets(chunks: Chunk[])` async
优化 chunk 的生成资源。
@@ -179,14 +205,14 @@ compiler.plugin('compilation', function(compilation) {
这是一个为每个 chunk 添加 banner 的例子。
-```javascript
+``` js
compilation.plugin("optimize-chunk-assets", function(chunks, callback) {
- chunks.forEach(function(chunk) {
- chunk.files.forEach(function(file) {
- compilation.assets[file] = new ConcatSource("\/**Sweet Banner**\/", "\n", compilation.assets[file]);
- });
+ chunks.forEach(function(chunk) {
+ chunk.files.forEach(function(file) {
+ compilation.assets[file] = new ConcatSource("\/**Sweet Banner**\/", "\n", compilation.assets[file]);
});
- callback();
+ });
+ callback();
});
```
@@ -194,70 +220,77 @@ compilation.plugin("optimize-chunk-assets", function(chunks, callback) {
块生成资源已经被优化。这里是一个来自 [@boopathi](https://github.com/boopathi) 的示例插件，详细的输出每个块里有什么。
-```javascript
+``` js
var PrintChunksPlugin = function() {};
+
PrintChunksPlugin.prototype.apply = function(compiler) {
- compiler.plugin('compilation', function(compilation, params) {
- compilation.plugin('after-optimize-chunk-assets', function(chunks) {
- console.log(chunks.map(function(c) {
- return {
- id: c.id,
- name: c.name,
- includes: c.modules.map(function(m) {
- return m.request;
- })
- };
- }));
- });
+ compiler.plugin('compilation', function(compilation, params) {
+ compilation.plugin('after-optimize-chunk-assets', function(chunks) {
+ console.log(chunks.map(function(c) {
+ return {
+ id: c.id,
+ name: c.name,
+ includes: c.modules.map(function(m) {
+ return m.request;
+ })
+ };
+ }));
});
+ });
};
```
+
## `optimize-assets(assets: Object{name: Source})` async
优化所有生成资源。
生成资源被存放在 `this.assets`。
+
## `after-optimize-assets(assets: Object{name: Source})`
生成资源优化已经结束。
+
## `build-module(module)`
一个模块构建开始前。
-```javascript
+``` js
compilation.plugin('build-module', function(module){
- console.log('build module');
- console.log(module);
+ console.log('About to build: ', module);
});
```
+
## `succeed-module(module)`
一个模块已经被成功构建。
-```javascript
+
+``` js
compilation.plugin('succeed-module', function(module){
- console.log('succeed module');
- console.log(module);
+ console.log('Successfully built: ', module);
});
```
+
## `failed-module(module)`
一个模块构建失败。
-```javascript
+
+``` js
compilation.plugin('failed-module', function(module){
- console.log('failed module');
- console.log(module);
+ console.log('Failed to build: ', module);
});
```
+
## `module-asset(module, filename)`
一个模块中的一个生成资源被加到编译中。
+
## `chunk-asset(chunk, filename)`
一个 chunk 中的一个生成资源被加到编译中。
diff --git a/src/content/api/plugins/compiler.md b/src/content/api/compiler.md
similarity index 99%
rename from src/content/api/plugins/compiler.md
rename to src/content/api/compiler.md
index f20b6d2808ec..a0f692353ebf 100755
--- a/src/content/api/plugins/compiler.md
+++ b/src/content/api/compiler.md
@@ -1,5 +1,6 @@
---
title: 编译器(Compiler)
+group: Plugins
sort: 2
contributors:
- rishantagarwal
diff --git a/src/content/api/index.md b/src/content/api/index.md
index c479127540b0..6843b0009652 100755
--- a/src/content/api/index.md
+++ b/src/content/api/index.md
@@ -1,14 +1,44 @@
---
-title: Webpack APIs
+title: Introduction
sort: 1
---
-The following interfaces provide access to the compilation process in different ways:
+可以使用各种接口来定制化编译过程(compilation process)。一些特性会在几个接口之间重叠，例如，配置选项可能会从 CLI 标记(flag)中获取参数，而其他已存在特性，则只能通过某个接口去获取。以下高级信息可以帮助你起步。
-* [CLI](/api/cli)
-* [Node](/api/node)
-* [Loaders](/api/loaders)
-* [Plugins](/api/plugins)
+
+## CLI
+
+命令行接口（Command Line Interface - CLI），用来配置和交互你的构建(build)。这在早期的原型和分析时特别有用。在大多数情况下，CLI 仅用于使用配置文件和传入几个标记(flag)（例如 `--env`）启动该进程。
+
+[了解更多！](/api/cli)
+
+
+## 模块
+
+当使用 webpack 处理模块时，理解不同的模块语法（特别是[模块方法](/api/module-methods)和[模块变量](/api/module-variables)）是很重要的。 - 这些模块语法 webpack 都可以支持。
+
+[了解更多！](/api/module-methods)
+
+
+## Node
+
+虽然大多数用户只要用到 CLI 和配置文件足矣，但是更细粒度的编译控制，需要通过 Node 接口实现。这包括传递多个配置文件、自动执行或观察程序，以及收集统计信息。
+
+[了解更多！](/api/node)
+
+
+## loader
+
+loader 是用于将模块的源代码进行转换。loader 被编写为，接受源代码作为参数的函数，并对源码应用转换返回该代码的新版本。
+
+[了解更多！](/api/loaders)
+
+
+## plugin
+
+由 webpack 提供的插件接口，允许用户直接触及到编译过程(compilation process)。插件可以将处理函数(handler)，注册到编译过程中的不同事件点上运行的生命周期钩子函数上。当执行每个钩子时，插件能够完全访问到编译(compilation)的当前状态。
+
+[了解更多！](/api/plugins)
***
diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md
index ad75cf20b3e1..6479f51fb13a 100755
--- a/src/content/api/loaders.md
+++ b/src/content/api/loaders.md
@@ -1,32 +1,31 @@
---
-title: Loader API
+title: loader API
sort: 4
contributors:
- TheLarkInn
- jhnns
-
---
loader 用于对模块的源代码进行转换。它们是一些将资源文件的源码作为参数，并返回新的源码的（运行在 Node.js 中的）函数。
-## 如何写一个 Loader
+## 如何写一个 loader
所谓 loader 只是导出为一个函数的 JavaScript 模块。[loader runner](https://github.com/webpack/loader-runner) 会调用这个函数，然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。函数的 `this` 上下文将由 webpack 填充，并且 [loader runner](https://github.com/webpack/loader-runner) 带有一些有用方法，可以使 loader 改变为异步调用方式，或者获取 query 参数。
第一个 loader 的传入参数只有一个：资源文件(resource file)的内容。compiler 需要得到最后一个 loader 产生的处理结果。这个处理结果应该是 `String` 或者 `Buffer`（被转换为一个 string），代表了模块的 JavaScript 源码。另外还可以传递一个可选的 SourceMap 结果（格式为 JSON 对象）。
-如果是单个处理结果，可以在**同步模式**中直接返回。如果有多个处理结果，则需要调用 `this.callback()`。在**异步模式**中，必须调用 `this.async()`，来指示 [loader runner](https://github.com/webpack/loader-runner) 等待异步结果，它会返回 `this.callback()` 回调函数，随后 Loader 必须返回 `undefined` 并且调用该回调函数。
+如果是单个处理结果，可以在**同步模式**中直接返回。如果有多个处理结果，则需要调用 `this.callback()`。在**异步模式**中，必须调用 `this.async()`，来指示 [loader runner](https://github.com/webpack/loader-runner) 等待异步结果，它会返回 `this.callback()` 回调函数，随后 loader 必须返回 `undefined` 并且调用该回调函数。
## 示例
-### 同步 Loader
+### 同步 loader
**sync-loader.js**
```javascript
module.exports = function(content) {
- return someSyncOperation(content);
+ return someSyncOperation(content);
};
```
@@ -34,13 +33,13 @@ module.exports = function(content) {
```javascript
module.exports = function(content) {
- this.callback(null, someSyncOperation(content), sourceMaps, ast);
- return; // 当调用callback()时总是返回undefined
+ this.callback(null, someSyncOperation(content), sourceMaps, ast);
+ return; // 当调用callback()时总是返回undefined
};
```
-### 异步 Loader
+### 异步 loader
**async-loader.js**
@@ -69,7 +68,7 @@ module.exports = function(content) {
T> loader 最初被设计为可以在同步 loader pipeline（如 Node.js ，使用 [enhanced-require](https://github.com/webpack/enhanced-require)），与异步 pipeline（如 webpack ）中运行。然而在 Node.js 这样的单线程环境下进行耗时长的同步计算不是个好主意，我们建议尽可能地使您的 loader 异步化。但如果计算量很小，同步 loader 也是可以的。
-### "Raw" Loader
+### "Raw" loader
默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。通过设置 `raw`，loader 可以接收原始的 `Buffer`。每一个 loader 都可以用 `String` 或者 `Buffer` 的形式传递它的处理结果。Complier 将会把它们在 loader 之间相互转换。
@@ -86,11 +85,11 @@ module.exports.raw = true;
```
-### Pitching Loader
+### Pitching loader
loader **总是**从右到左地被调用，但是在一些情况下，loader 不需要关心之前处理的结果或者资源(resource)，而是只关心**元数据(metadata)**。在 loader 被调用前（从右到左），loader 中的 `pitch` 方法会**从左到右**依次被调用。
-如果中间某个 Loader 的 `pitch` 方法返回了一个值，那么剩下的 Loader 都会被跳过，转而从当前 Loader 开始向左调用 Loader。`data`可以在 pitch 和普通的 Loader 调用间传递。
+如果中间某个 loader 的 `pitch` 方法返回了一个值，那么剩下的 loader 都会被跳过，转而从当前 loader 开始向左调用 loader。`data`可以在 pitch 和普通的 loader 调用间传递。
```javascript
module.exports = function(content) {
@@ -108,7 +107,7 @@ module.exports.pitch = function(remainingRequest, precedingRequest, data) {
## The loader context
-Loader context 表示在 Loader 内使用 `this` 可以访问的一些方法或属性
+loader context 表示在 loader 内使用 `this` 可以访问的一些方法或属性
假设我们在 `/abc/file.js` 中这样请求加载别的模块：
@@ -119,7 +118,7 @@ require("./loader1?xyz!loader2!./resource?rrr");
### `this.version`
-**Loader API 的版本号。**目前是 `2`。这对于向后兼容性有一些用处。通过这个版本号，你可以为不同版本间的破坏性变更编写不同的逻辑，或做降级处理。
+**loader API 的版本号。**目前是 `2`。这对于向后兼容性有一些用处。通过这个版本号，你可以为不同版本间的破坏性变更编写不同的逻辑，或做降级处理。
### `this.context`
@@ -185,12 +184,12 @@ cacheable(flag = true: boolean)
默认情况下，loader 的处理结果会被标记为可缓存。调用这个方法然后传入 `false`，可以关闭 loader 的缓存。
-一个可缓存的 Loader 在输入和相关依赖没有变化时，必须返回相同的结果。这意味着 Loader 除了 `this.addDependency` 里指定的以外，不应该有其它任何外部依赖。
+一个可缓存的 loader 在输入和相关依赖没有变化时，必须返回相同的结果。这意味着 loader 除了 `this.addDependency` 里指定的以外，不应该有其它任何外部依赖。
### `this.loaders`
-所有 Loader 组成的数组。它在 pitch 阶段的时候是可以写入的。
+所有 loader 组成的数组。它在 pitch 阶段的时候是可以写入的。
```typescript
loaders = [{request: string, path: string, query: string, module: function}]
@@ -218,7 +217,7 @@ loaders = [{request: string, path: string, query: string, module: function}]
### `this.loaderIndex`
-当前 Loader 在 Loader 数组中的索引。
+当前 loader 在 loader 数组中的索引。
在我们的示例中：loader1：`0`，loader2：`1`
@@ -255,7 +254,7 @@ loaders = [{request: string, path: string, query: string, module: function}]
如果是 Webpack 编译的，这个布尔值会被设置为真。
-T> Loader 最初被设计为可以同时当 Babel transform 用。如果你编写了一个 Loader 可以同时兼容二者，那么可以使用这个属性了解是否存在可用的 loaderContext 和 Webpack 的特性。
+T> loader 最初被设计为可以同时当 Babel transform 用。如果你编写了一个 loader 可以同时兼容二者，那么可以使用这个属性了解是否存在可用的 loaderContext 和 Webpack 的特性。
### `this.sourceMap`
@@ -306,7 +305,7 @@ addDependency(file: string)
dependency(file: string) // 简写
```
-加入一个文件作为产生 Loader 结果的依赖，使它们的任何变化可以被监听到。例如，[html-loader](https://github.com/webpack/html-loader) 就使用了这个技巧。当它发现 `src` 和 `src-set` 属性时，就会把这些属性上的 url 加入到被解析的 html 文件的依赖中。
+加入一个文件作为产生 loader 结果的依赖，使它们的任何变化可以被监听到。例如，[html-loader](https://github.com/webpack/html-loader) 就使用了这个技巧。当它发现 `src` 和 `src-set` 属性时，就会把这些属性上的 url 加入到被解析的 html 文件的依赖中。
### `this.addContextDependency`
@@ -315,7 +314,7 @@ dependency(file: string) // 简写
addContextDependency(directory: string)
```
-把文件夹作为 Loader 的依赖加入。
+把文件夹作为 loader 的依赖加入。
### `this.clearDependencies`
@@ -324,7 +323,7 @@ addContextDependency(directory: string)
clearDependencies()
```
-移除 Loader 所有的依赖。甚至自己和其它 Loader 的初始依赖。考虑使用 `pitch`。
+移除 loader 所有的依赖。甚至自己和其它 loader 的初始依赖。考虑使用 `pitch`。
### `this.emitFile`
@@ -366,12 +365,12 @@ resolveSync(context: string, request: string) -> string
### `this.value`
-向下一个 Loader 传值。如果你知道了作为模块执行后的结果，请在这里赋值（以单元素数组的形式）。
+向下一个 loader 传值。如果你知道了作为模块执行后的结果，请在这里赋值（以单元素数组的形式）。
### `this.inputValue`
-从上一个 Loader 那里传递过来的值。如果你会以模块的方式处理输入参数，建议预先读入这个变量。（为了性能因素）
+从上一个 loader 那里传递过来的值。如果你会以模块的方式处理输入参数，建议预先读入这个变量。（为了性能因素）
### `this.options`
diff --git a/src/content/api/plugins/module-factories.md b/src/content/api/module-factories.md
similarity index 72%
rename from src/content/api/plugins/module-factories.md
rename to src/content/api/module-factories.md
index b7a987e146a4..45562112eb10 100755
--- a/src/content/api/plugins/module-factories.md
+++ b/src/content/api/module-factories.md
@@ -1,11 +1,14 @@
---
-title: Context/Normal Module Factories
+title: Module Factories
+group: Plugins
sort: 5
---
+?> Lead in...
+
## `NormalModuleFactory`
-### `before-resolve(data)` 异步 瀑布流
+`before-resolve(data)` 异步 瀑布流
工厂开始解析之前。`data` 对象具有以下属性：
@@ -14,7 +17,7 @@ sort: 5
插件被允许修改对象或将新的类似对象传递给回调。
-### `after-resolve(data)` 异步 瀑布流
+`after-resolve(data)` 异步 瀑布流
工厂解析 request 之后。`data` 对象具有以下属性：
@@ -25,13 +28,20 @@ sort: 5
* `resource`：原始资源。将会被 NormalModule 加载。
* `parser`：被 NormalModule 使用的 parser。
+
## `ContextModuleFactory`
-### `before-resolve(data)` async waterfall
+`before-resolve(data)` async waterfall
+
+?> Add documentation.
+
+`after-resolve(data)` async waterfall
+
+?> Add documentation.
-### `after-resolve(data)` async waterfall
+`alternatives(options: Array)` async waterfall
-### `alternatives(options: Array)` async waterfall
+?> Add documentation.
***
diff --git a/src/content/api/module-methods.md b/src/content/api/module-methods.md
index 3ec25cf65ef1..0d0839d26876 100755
--- a/src/content/api/module-methods.md
+++ b/src/content/api/module-methods.md
@@ -1,5 +1,6 @@
---
-title: Module API - Methods
+title: Module Methods
+group: Modules
sort: 3
contributors:
- skipjack
diff --git a/src/content/api/module-variables.md b/src/content/api/module-variables.md
index b1e51832179b..4c59b5918cc0 100755
--- a/src/content/api/module-variables.md
+++ b/src/content/api/module-variables.md
@@ -1,6 +1,7 @@
---
-title: Module API - Variables
-sort: 3
+title: Module Variables
+group: Modules
+sort: 4
contributors:
- skipjack
- sokra
diff --git a/src/content/api/plugins/parser.md b/src/content/api/parser.md
similarity index 99%
rename from src/content/api/plugins/parser.md
rename to src/content/api/parser.md
index 2f891b6be4ef..5b583191f919 100755
--- a/src/content/api/plugins/parser.md
+++ b/src/content/api/parser.md
@@ -1,5 +1,6 @@
---
title: Parser
+group: Plugins
sort: 8
---
diff --git a/src/content/api/plugins/index.md b/src/content/api/plugins.md
similarity index 59%
rename from src/content/api/plugins/index.md
rename to src/content/api/plugins.md
index da9e2d13d986..ce6a74b9d49e 100755
--- a/src/content/api/plugins/index.md
+++ b/src/content/api/plugins.md
@@ -1,19 +1,40 @@
---
title: 插件 API(Plugin API)
-sort: 1
+group: Plugins
+sort: 0
---
-T> 关于编写插件的高度介绍，可以从阅读[如何编写插件](/development/how-to-write-a-plugin)开始。
-
-webpack 以插件的形式提供了灵活强大的自定义 api 功能。使用插件，我们可以为 webpack 添加功能。另外，webpack 提供生命周期钩子以便注册插件。在每个生命周期点，webpack 会运行所有注册的插件,并提供当前webpack编译状态信息。
+T> 关于编写插件的高度介绍，可以从阅读[编写一个插件](/contribute/writing-a-plugin)开始。
很多 webpack 中的对象都继承了 `Tapable` 类，暴露了一个 `plugin` 方法。插件可以使用 `plugin` 方法注入自定义的构建步骤。你可以看到 `compiler.plugin` 和 `compilation.plugin` 被频繁使用。基本上，每个插件的调用都在构建流程中绑定了回调来触发特定的步骤。
+这里有两种类型的插件接口(plugin interfaces)……
+
+__基于时间__
+
+- 同步（默认）：该插件同步运行，并且返回其输出。
+- 异步：该插件同步运行，并使用给定的 `callback` 返回其输出。
+- 并行：处理函数(handlers)被并行地调用
+
+ * 没有委托（bailing）（默认）：没有返回值。
+ * 委托：
+ *
+ *
+
+（译注：这里的*处理函数*指插件通过 `plugin` 方法注册的函数）
+
+__返回值__
+
+- 没有委托(not bailing)（默认）：没有返回值。
+- 委托(bailing)：处理函数被按顺序地调用，直到某一个处理函数有返回任何值。
+- 并行委托(parallel bailing)：处理函数被并行地调用（异步地）。产生的第一个返回值（按顺序地）最后会被使用。
+- 瀑布流(waterfall)：每个处理函数取得并使用上一个处理函数的结果作为参数。
+
每个插件会在 webpack 启动时被安装一次，webpack 通过调用插件的 `apply` 方法来安装它们，并且传递一个 webpack `compiler` 对象的引用。然后你可以调用 `compiler.plugin` 来访问资源的编译和它们独立的构建步骤。下面就是一个示例：
-```javascript
-// MyPlugin.js
+__my-plugin.js__
+``` js
function MyPlugin(options) {
// Configure your plugin with options...
}
@@ -40,30 +61,16 @@ MyPlugin.prototype.apply = function(compiler) {
module.exports = MyPlugin;
```
-Then in `webpack.config.js`
+__webpack.config.js__
-```javascript
- plugins: [
- new MyPlugin({options: 'nada'})
- ]
+``` js
+plugins: [
+ new MyPlugin({
+ options: 'nada'
+ })
+]
```
-## 插件接口(Plugin Interfaces)
-
-插件接口有下面两种不同区别。
-
-* 基于时间：
- * 同步（默认）：就像上面看到的，使用 return 。
- * 异步：最后的参数是一个回调。规范为：function(err, result)
- * 并行：处理函数（handlers）被并行地调用（异步地）。
-
-* 返回值:
- * 没有委托（bailing）（默认）：没有返回值。
- * 委托：处理函数被按顺序地调用，直到某一个处理函数有返回任何值。
- * 并行委托：处理函数被并行地调用（异步地）。产生的第一个返回值（按顺序地）最后会被使用。
- * 瀑布流：每个处理函数取得并使用上一个处理函数的结果作为参数。
-
-（译注：这里的*处理函数*指插件通过 `plugin` 方法注册的函数）
## Tapable & Tapable 实例
@@ -73,7 +80,7 @@ webpack 源代码中的一些 **Tapable 实例**都继承或混合了 `Tapable`
对于插件作者来说,知道webpack源代码中有哪些 `Tapable` 实例是非常重要的。这些实例提供各种事件钩子,以便附加自定义插件。
因此,这章节会罗列除 webpack 中所有的 `Tapable` 实例（以及它们的事件钩子）,便于写插件的作者使用。
-关于 `Tapable` 的更多内容可以访问 [tapable repository](https://github.com/webpack/tapable)，或访问 [complete overview](./tapable)
+关于 `Tapable` 的更多内容可以访问 [完整概述](/api/tapable)，或访问 [tapable 仓库](https://github.com/webpack/tapable)
***
diff --git a/src/content/api/plugins/dependency.md b/src/content/api/plugins/dependency.md
index 582f23ac49c9..e69de29bb2d1 100755
--- a/src/content/api/plugins/dependency.md
+++ b/src/content/api/plugins/dependency.md
@@ -1,10 +0,0 @@
----
-title: Dependency
-sort: 7
----
-
-> TODO
-
-***
-
-> 原文：https://webpack.js.org/api/plugins/dependency/
diff --git a/src/content/api/plugins/tapable.md b/src/content/api/plugins/tapable.md
index 45ae62381274..e69de29bb2d1 100755
--- a/src/content/api/plugins/tapable.md
+++ b/src/content/api/plugins/tapable.md
@@ -1,76 +0,0 @@
----
-title: Tapable
-sort: 1
-contributors:
- - thelarkinn
- - pksjce
- - e-cloud
----
-
-[Tapable](https://github.com/webpack/tapable)是一个小型库,能够让我们为javascript模块添加并应用插件。
-它可以被其它模块继承或混合。它类似于NodeJS的 `EventEmitter` 类,专注于自定义事件的发射和操作。
-除此之外, `Tapable` 允许你通过回调函数的参数访问事件的生产者。
-
-`Tapable` 有四组成员函数:
-
-* `plugin(name:string, handler:function)` - 这个方法允许给**Tapable实例**事件注册一个自定义插件。
-这个操作类似于 `EventEmitter` 的 `on()`, 注册一个处理函数/监听器到某个信号/事件发生时执行。
-
-* `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` 是 [AbstractPlugin](https://github.com/webpack/webpack/blob/master/lib/AbstractPlugin.js) 的子类，或者是一个有 `apply` 方法的类（或者，少数情况下是一个对象），或者只是一个有注册代码的函数。这个方法只是 **apply** 插件的定义,所以正真的事件监听器会被注册到**Tapable实例**的注册表。
-
-* `applyPlugins*(name:string, …)` - 使用此函数，**Tapable 实例**可以对指定 hash 下的所有插件执行 apply。
-这些方法执行类似于 `EventEmitter` 的 `emit()`, 可以针对不同的使用情况采用不同的策略控制事件发射。
-
-* `mixin(pt: Object)` - 一个简单的方法能够以混合的方式扩展 `Tapable` 的原型,而非继承。
-
-不同的 `applyPlugins*` 方法对应以下使用情况:
-
-* 串行执行插件
-
-* 并行执行插件
-
-* 插件一个接一个的执行,并且每个插件接收上一个插件的返回值(瀑布)
-
-* 异步执行插件
-
-* 保护模式终止插件执行: 一旦某个插件返回 non-`undefined`，会退出运行流程并返回 *这个插件的返回值*。这看起来像 `EventEmitter` 的 `once()`，但他们是完全不同的。
-
-
-## 示例
-
-webpack 的其中一个 Tapable 实例 [Compiler](/api/plugins/compiler)， 它的职责是编译 webpack 的配置对象，并返回一个 [Compilation](/api/plugins/compilation) 实例。当 Compilation 实例运行时，它会创建所需的 bundle。
-
-下面是一个使用 `Tapable` 的小例子。
-
-**node_modules/webpack/lib/Compiler.js**
-
-```javascript
-var Tapable = require("tapable");
-function Compiler() {
- Tapable.call(this);
-}
-Compiler.prototype = Object.create(Tapable.prototype);
-```
-
-接着写一个编译器的插件
-
-**my-custom-plugin.js**
-
-```javascript
-function CustomPlugin() {}
-CustomPlugin.prototype.apply = function(compiler) {
- compiler.plugin('emit', pluginFunction);
-}
-```
-
-这个编译器会依下面的代码在合适的生命周期点执行插件
-
-**node_modules/webpack/lib/Compiler.js**
-
-```javascript
-this.apply*("emit",options) // 将会更新 'emit' 名称下的所有插件，并执行它们。
-```
-
-***
-
-> 原文：https://webpack.js.org/pluginsapi/tapable/
diff --git a/src/content/api/plugins/template.md b/src/content/api/plugins/template.md
index fdf1058bad32..e69de29bb2d1 100755
--- a/src/content/api/plugins/template.md
+++ b/src/content/api/plugins/template.md
@@ -1,40 +0,0 @@
----
-title: Templates
-sort: 8
----
-
-## MainTemplate
-
-### `startup(source, module, hash)`
-```javascript
- compilation.mainTemplate.plugin('startup', function(source, module, hash) {
- if (!module.chunks.length && source.indexOf('__ReactStyle__') === -1) {
- var originName = module.origins && module.origins.length ? module.origins[0].name : 'main';
- return ['if (typeof window !== "undefined") {',
- ' window.__ReactStyle__ = ' + JSON.stringify(classNames[originName]) + ';',
- '}'
- ].join('\n') + source;
- }
- return source;
- });
-```
-
-## HotUpdateChunkTemplate
-
-TODO
-
-## ChunkTemplate
-
-TODO
-
-## ModuleTemplate
-
-TODO
-
-## FunctionModuleTemplate
-
-TODO
-
-***
-
-> 原文：https://webpack.js.org/api/plugins/template/
diff --git a/src/content/api/plugins/resolver.md b/src/content/api/resolver.md
similarity index 99%
rename from src/content/api/plugins/resolver.md
rename to src/content/api/resolver.md
index 9ffe85fbedf3..c3943ce4a72e 100755
--- a/src/content/api/plugins/resolver.md
+++ b/src/content/api/resolver.md
@@ -1,5 +1,6 @@
---
title: Resolver
+group: Plugins
sort: 5
---
diff --git a/src/content/api/stats.md b/src/content/api/stats.md
index abf794693649..c2898cb44444 100755
--- a/src/content/api/stats.md
+++ b/src/content/api/stats.md
@@ -1,6 +1,6 @@
---
-title: 包含统计数据的 JSON 文件(Stats JSON)
-sort: 1
+title: 包含统计数据的文件(Stats Data)
+sort: 3
contributors:
- skipjack
---
diff --git a/src/content/api/tapable.md b/src/content/api/tapable.md
new file mode 100644
index 000000000000..1a53564b8854
--- /dev/null
+++ b/src/content/api/tapable.md
@@ -0,0 +1,64 @@
+---
+title: Tapable
+group: Plugins
+sort: 1
+contributors:
+ - thelarkinn
+ - pksjce
+ - e-cloud
+---
+
+[Tapable](https://github.com/webpack/tapable) is small library that allows you to add and apply plugins to a javascript module. It can be inherited or mixed in to other modules. It is similar to NodeJS's `EventEmitter` class, focusing on custom event emission and manipulation. However, in addition to this, `Tapable` allows you to have access to the "emittee" or "producer" of the event through callbacks arguments.
+
+`Tapable` has four groups of member functions:
+
+- `plugin(name:string, handler:function)`: This allows a custom plugin to register into a **Tapable instance**'s event. This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
+- `apply(…pluginInstances: (AnyPlugin|function)[])`: `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the _Tapable_ instance's registry.
+- `applyPlugins*(name:string, …)`: The _Tapable_ instance can apply all the plugins under a particular hash using these functions. These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
+- `mixin(pt: Object)`: a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
+
+The different `applyPlugins*` methods cover the following use cases:
+
+- Plugins can run serially.
+- Plugins can run in parallel.
+- Plugins can run one after the other but taking input from the previous plugin (waterfall).
+- Plugins can run asynchronously.
+- Quit running plugins on bail: that is, once one plugin returns non-`undefined`, jump out of the run flow and return _the return of that plugin_. This sounds like `once()` of `EventEmitter` but is totally different.
+
+
+## Example
+
+One of webpack's _Tapable_ instances, [Compiler](/api/compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](/api/compilation) instance. When the Compilation instance runs, it creates the required bundles.
+
+See below is a simplified version of how this looks using `Tapable`:
+
+__node_modules/webpack/lib/Compiler.js__
+
+``` js
+var Tapable = require("tapable");
+
+function Compiler() {
+ Tapable.call(this);
+}
+
+Compiler.prototype = Object.create(Tapable.prototype);
+```
+
+Now to write a plugin on the compiler,
+
+__my-custom-plugin.js__
+
+``` js
+function CustomPlugin() {}
+CustomPlugin.prototype.apply = function(compiler) {
+ compiler.plugin('emit', pluginFunction);
+}
+```
+
+The compiler executes the plugin at the appropriate point in its lifecycle by
+
+__node_modules/webpack/lib/Compiler.js__
+
+``` js
+this.apply*("emit",options) // will fetch all plugins under 'emit' name and run them.
+```
diff --git a/src/content/api/template.md b/src/content/api/template.md
new file mode 100644
index 000000000000..3824eafe9e8b
--- /dev/null
+++ b/src/content/api/template.md
@@ -0,0 +1,43 @@
+---
+title: Templates
+group: Plugins
+sort: 8
+---
+
+## MainTemplate
+
+### `startup(source, module, hash)`
+
+``` js
+compilation.mainTemplate.plugin('startup', function(source, module, hash) {
+ if (!module.chunks.length && source.indexOf('__ReactStyle__') === -1) {
+ var originName = module.origins && module.origins.length ? module.origins[0].name : 'main';
+ return [
+ 'if (typeof window !== "undefined") {',
+ ' window.__ReactStyle__ = ' + JSON.stringify(classNames[originName]) + ';',
+ '}'
+ ].join('\n') + source;
+ }
+ return source;
+});
+```
+
+
+## ModuleTemplate
+
+?> Document the `ModuleTemplate`...
+
+
+## ChunkTemplate
+
+?> Document the `ChunkTemplate`...
+
+
+## FunctionModuleTemplate
+
+?> Document the `FunctionModuleTemplate`...
+
+
+## HotUpdateChunkTemplate
+
+?> Document the `HotUpdateChunkTemplate`...
diff --git a/src/content/branding.md b/src/content/branding.md
index 8811d3992603..ef82689f0217 100755
--- a/src/content/branding.md
+++ b/src/content/branding.md
@@ -1,5 +1,6 @@
---
title: Branding Guidelines
+sort: 2
contributors:
- jhnns
- skipjack
@@ -9,10 +10,7 @@ contributors:
Here you can find **webpack** project brand guidelines, assets, and license. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them.
-## [Jump to All Original Media Files](https://github.com/webpack/media)
-
-
-## The webpack Name
+## The Name
webpack should **always** be written in lower-case letters, even at the beginning of a sentence.
@@ -72,7 +70,7 @@ We use the beautiful [Geomanist Medium](http://geomanist.com/) font from the ext
The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](http://opencollective.com) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
-| Color Name | HEX Code | RGB Code | Sample
+| Color Name | HEX Code | RGB Code | Sample
|---------------|---------------|-----------------------|-------------------------------
| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` |
| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` |
diff --git a/src/content/comparison.md b/src/content/comparison.md
index 242a1250cccc..d8adb0d977e8 100755
--- a/src/content/comparison.md
+++ b/src/content/comparison.md
@@ -1,6 +1,6 @@
---
title: 对比
-sort: 25
+sort: 1
contributors:
- pksjce
- bebraw
diff --git a/src/content/configuration/dev-server.md b/src/content/configuration/dev-server.md
index d13e49126687..4e349aa3a415 100755
--- a/src/content/configuration/dev-server.md
+++ b/src/content/configuration/dev-server.md
@@ -46,6 +46,18 @@ W> Be aware that when [exporting multiple configurations](/configuration/configu
T> If you're having trouble, navigating to the `/webpack-dev-server` route will show where files are served. For example, `http://localhost:9000/webpack-dev-server`.
+## `devServer.after`
+
+`function`
+
+Provides the ability to execute custom middleware after all other middleware
+internally within the server.
+
+```js
+after(app){
+ // do fancy stuff
+}
+```
## `devServer.allowedHosts`
@@ -80,6 +92,21 @@ To use this option with the CLI pass the `--allowed-hosts` option a comma-delimi
webpack-dev-server --entry /entry/file --output-path /output/path --allowed-hosts .host.com,host2.com
```
+## `devServer.before`
+
+`function`
+
+Provides the ability to execute custom middleware prior to all other middleware
+internally within the server. This could be used to define custom handlers, for
+example:
+
+```js
+before(app){
+ app.get('/some/path', function(req, res) {
+ res.json({ custom: 'response' });
+ });
+}
+```
## `devServer.bonjour`
@@ -377,7 +404,7 @@ Usage via the CLI
webpack-dev-server --inline=false
```
-T> 当使用模块热替换时，建议使用内联模式(inline mode)。
+T> 推荐使用模块热替换的内联模式，因为它包含来自 websocket 的 HMR 触发器。轮询模式可以作为替代方案，但需要一个额外的入口点：`'webpack/hot/poll?1000'`。
## `devServer.lazy` 🔑
@@ -470,7 +497,7 @@ overlay: {
`string`
-Path to a SSL pfx file.
+When used via the CLI, a path to an SSL .pfx file. If used in options, it should be the bytestream of the .pfx file.
```js
pfx: '/path/to/file.pfx'
@@ -666,6 +693,8 @@ webpack-dev-server --quiet
`function`
+W> This option is __deprecated__ in favor of `before` and will be removed in v3.0.0.
+
Here you can access the Express app object and add your own custom middleware to it.
For example, to define custom handlers for some paths:
diff --git a/src/content/configuration/index.md b/src/content/configuration/index.md
index 830386d54d38..76a371e659f3 100755
--- a/src/content/configuration/index.md
+++ b/src/content/configuration/index.md
@@ -23,6 +23,8 @@ T> 注意整个配置中我们使用 Node 内置的 [path 模块](https://nodejs
点击下面配置代码中每个选项的名称，跳转到详细的文档。还要注意，带有箭头的项目可以展开，以显示更多示例，在某些情况下可以看到高级配置。
+__webpack.config.js__
+
``` js-with-links-with-details
const path = require('path');
diff --git a/src/content/configuration/stats.md b/src/content/configuration/stats.md
index a0c796410ba0..be2f6512c633 100755
--- a/src/content/configuration/stats.md
+++ b/src/content/configuration/stats.md
@@ -6,6 +6,7 @@ contributors:
- sallar
- jungomi
- ldrick
+ - jasonblanchard
---
`stats` 选项能让你准确地控制显示哪些包的信息。如果你希望得到部分包的信息（而不是一股脑全部输出），而不想使用 `quiet` 或者 `noInfo` 模式的时候，这个选项是一个很好的折衷办法。
@@ -40,6 +41,7 @@ stats: {
// 增加资源信息
assets: true,
// 对资源按指定的项进行排序
+ // 你可以使用 `!field` 来反转排序。
assetsSort: "field",
// 增加缓存了的（但没构建）模块的信息
cached: true,
@@ -54,6 +56,7 @@ stats: {
// 增加包 和 包合并 的来源信息
chunkOrigins: true,
// 对包按指定的项进行排序
+ // 你可以使用 `!field` 来反转排序。默认是按照 `id` 排序。
chunksSort: "field",
// 用于缩短请求的上下文目录
context: "../src/",
@@ -87,6 +90,7 @@ stats: {
// 增加内置的模块信息
modules: true,
// 对模块按指定的项进行排序
+ // 你可以使用 `!field` 来反转排序。默认是按照 `id` 排序。
modulesSort: "field",
// Show dependencies and origin of warnings/errors (since webpack 2.5.0)
moduleTrace: true,
diff --git a/src/content/contribute/index.md b/src/content/contribute/index.md
new file mode 100644
index 000000000000..a24b26e7e88b
--- /dev/null
+++ b/src/content/contribute/index.md
@@ -0,0 +1,71 @@
+---
+title: Contribute
+sort: 1
+contributors:
+ - rouzbeh84
+ - scottdj92
+ - harrynewsome
+---
+
+The people who contribute to webpack do so for the love of open source, our users and ecosystem, and most importantly, pushing the web forward together. Because of our [Open Collective](http://opencollective.com/webpack) model for funding and transparency, we are able to funnel support and funds through contributors, dependent projects, and the contributor and core teams. To make a donation, simply click the button below...
+
+
+
+But what is the return on the investment?
+
+
+## Developers
+
+The biggest core feature we'd like to provide is enjoyable development experience. Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about webpack.
+
+### How Can I Help?
+
+Anybody can help by doing any of the following:
+
+- Ask your employer to use webpack in projects.
+- Help us write and maintain the content on this site (see the [writer's guide](/writers-guide)).
+- Contribute to the [core repository](https://github.com/webpack/webpack).
+- Become a backer or sponsor on [open collective](https://opencollective.com/webpack#support).
+
+### Encouraging Employers
+
+You can ask your employer to improve your workflow by leveraging webpack: an all-in-one tool for fonts, images and image optimiziation, and json. Explain to them how webpack will attempt to bundle your code and assets the best it can for the smallest file size, leading to speedier sites and applications.
+
+### Your Contributions
+
+Contributing to webpack is not contributing to an exclusive club. You as a developer are contributing to the overall health of downstream projects. Hundreds, if not thousands, of projects depend on webpack and contributing will make the ecosystem better for all users.
+
+The remainder of this section of the site is dedicated to developers such as yourself who would like to become a part of our ever-growing community:
+
+- [Writing a Loader](./how-to-write-a-loader)
+- [Writing a Plugin](./how-to-write-a-plugin)
+- [Plugin Patterns](./plugin-patterns)
+- [Release Process](./release-process)
+
+
+## Executives
+
+CTO's, VPs, and owners can help too!
+
+
+
+webpack is an all-in-one tool for bundling your code. It can handle fonts, images, data and more with the help of community-driven plugins and loaders. Having all of your assets be handled by one tool is immensely helpful, as you or your team can spend less time making sure a machine with many moving parts is working correctly and more time building your product.
+
+### Sponsorship
+
+Aside from monetary assistance, companies can support webpack by:
+
+- Providing developers that are not actively working on a project.
+- Contributing computing power for improved CI and regression testing.
+
+You can also encourage your developers to contribute to the ecosystem by open-sourcing webpack loaders, plugins and other utilities. And, as mentioned above, we would greatly appreciate any help increasing our CI/CD infrastructure.
+
+### Anyone Else
+
+To anyone else who is interested in helping our mission -- e.g. venture capitalists, government entities, digital agencies, etc. -- we would love for you to work with us, one of the top npm packages, to improve your product! Please don't hesitate to reach out with questions.
+
+
diff --git a/src/content/development/plugin-patterns.md b/src/content/contribute/plugin-patterns.md
similarity index 98%
rename from src/content/development/plugin-patterns.md
rename to src/content/contribute/plugin-patterns.md
index 229382e66188..b523436dbf63 100755
--- a/src/content/development/plugin-patterns.md
+++ b/src/content/contribute/plugin-patterns.md
@@ -1,6 +1,6 @@
---
-title: 有用的插件模式(Useful Plugin Patterns)
-sort: 2
+title: 插件模式(Plugin Patterns)
+sort: 4
---
插件给在 webpack 构建系统中做自定义带来了无限的机会。它允许你创建自定义的资源类型，执行独特的构建变更，甚至通过使用中间件来增强 webpack 的运行时。以下就是一些在编写插件时会用到的有用特性。
diff --git a/src/content/development/release-process.md b/src/content/contribute/release-process.md
similarity index 66%
rename from src/content/development/release-process.md
rename to src/content/contribute/release-process.md
index ebfc4ab95114..d27fbb13cdb3 100755
--- a/src/content/development/release-process.md
+++ b/src/content/contribute/release-process.md
@@ -1,13 +1,18 @@
---
-title: webpack 合并、标记和发布流程(webpack merge, tag and release process)
+title: 发布流程(Release Process)
+sort: 5
contributors:
- d3viant0ne
- sokra
---
-## Pull 请求到 `master`
+部署 webpack 的发布流程实际上是无痛苦的。阅读以下步骤，你可以清楚了解其完成情况。
+
+
+## 创建一个 pull requests
+
+当将 pull requests 合并到 `master` 分支中时，选择 _Create Merge Commit_ 选项。
- 当你提交到你的 `master` 分支上时，选择 _Create Merge-Commit_ 选项。
## 创建一个发布
diff --git a/src/content/writers-guide.md b/src/content/contribute/writers-guide.md
similarity index 97%
rename from src/content/writers-guide.md
rename to src/content/contribute/writers-guide.md
index 65904be8f102..418b2f901c58 100755
--- a/src/content/writers-guide.md
+++ b/src/content/contribute/writers-guide.md
@@ -91,9 +91,9 @@ Same goes for tables.
The [configuration](/configuration) properties should be ordered alphabetically as well:
-* `devServer.contentBase`
-* `devServer.compress`
-* `devServer.hot`
+- `devServer.contentBase`
+- `devServer.compress`
+- `devServer.hot`
### Quotes
diff --git a/src/content/development/how-to-write-a-loader.md b/src/content/contribute/writing-a-loader.md
similarity index 98%
rename from src/content/development/how-to-write-a-loader.md
rename to src/content/contribute/writing-a-loader.md
index b6b7f7ae8150..a2465a45dc1a 100755
--- a/src/content/development/how-to-write-a-loader.md
+++ b/src/content/contribute/writing-a-loader.md
@@ -1,6 +1,6 @@
---
-title: 如何编写一个 loader？(How to write a loader?)
-sort: 3
+title: 编写一个 loader
+sort: 2
contributors:
- asulaiman
---
@@ -43,7 +43,7 @@ Note that webpack currently only searches in your node modules folder for loader
resolveLoader: {
modules: [
'node_modules',
- path_resolve(__dirname, 'loaders')
+ path.resolve(__dirname, 'loaders')
]
}
```
diff --git a/src/content/development/how-to-write-a-plugin.md b/src/content/contribute/writing-a-plugin.md
similarity index 99%
rename from src/content/development/how-to-write-a-plugin.md
rename to src/content/contribute/writing-a-plugin.md
index afbaa9b7a45a..87de1f690a17 100755
--- a/src/content/development/how-to-write-a-plugin.md
+++ b/src/content/contribute/writing-a-plugin.md
@@ -1,6 +1,6 @@
---
-title: 如何编写一个插件？(How to write a plugin?)
-sort: 2
+title: 编写一个插件
+sort: 3
---
插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调，开发者可以引入它们自己的行为到 webpack 构建流程中。创建插件比创建 loader 更加高级，因为你将需要理解一些 webpack 底层的内部特性来做相应的勾子，所以做好阅读一些源码的准备！
diff --git a/src/content/development/index.md b/src/content/development/index.md
index dfd043bc94ee..e69de29bb2d1 100755
--- a/src/content/development/index.md
+++ b/src/content/development/index.md
@@ -1,16 +0,0 @@
----
-title: 开发(Development)
-contributors:
- - rouzbeh84
----
-
-这些指南涵盖了开发 webpack 所需要了解的内容。内容还在制作中！
-
-* [发布过程](./release-process)
-* [插件模式](./plugin-patterns)
-* [如何编写一个插件？](./how-to-write-a-plugin)
-* [如何编写一个 loader？](./how-to-write-a-loader)
-
-***
-
-> 原文：https://webpack.js.org/development/
diff --git a/src/content/glossary.md b/src/content/glossary.md
index 8380925c2cc6..41a65edcdd07 100755
--- a/src/content/glossary.md
+++ b/src/content/glossary.md
@@ -1,5 +1,6 @@
---
title: 概念术语
+sort: 3
contributors:
- rouzbeh84
- bebraw
diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md
index 0beee59dcfd1..eca3352bee69 100755
--- a/src/content/guides/asset-management.md
+++ b/src/content/guides/asset-management.md
@@ -335,7 +335,7 @@ __src/style.css__
+ url('./my-font.woff') format('woff');
+ font-weight: 600;
+ font-style: normal;
- }
++ }
.hello {
color: red;
diff --git a/src/content/guides/caching.md b/src/content/guides/caching.md
index 1b8c63b33efb..a74cc85870b0 100755
--- a/src/content/guides/caching.md
+++ b/src/content/guides/caching.md
@@ -255,7 +255,7 @@ __src/index.js__
// lodash 是由当前 script 脚本 import 导入进来的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-+ element.onClick = Print.bind(null, 'Hello webpack!');
++ element.onclick = Print.bind(null, 'Hello webpack!');
return element;
}
@@ -358,8 +358,8 @@ __src/index.js__
// lodash 是由当前 script 脚本 import 导入进来的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-- element.onClick = Print.bind(null, 'Hello webpack!');
-+ // element.onClick = Print.bind(null, 'Hello webpack!');
+- element.onclick = Print.bind(null, 'Hello webpack!');
++ // element.onclick = Print.bind(null, 'Hello webpack!');
return element;
}
diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index b1d8306fc574..373565e8e01e 100755
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -216,7 +216,7 @@ bundle.js 544 kB 0 [emitted] [big] main
[3] ./src/index.js 278 bytes {0} [built]
```
-T> 如果 `webpack.config.js` 存在，则 `webpack` 命令将默认选择使用它。我们在这里使用 `--config` 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置非常有用。
+T> 如果 `webpack.config.js` 存在，则 `webpack` 命令将默认选择使用它。我们在这里使用 `--config` 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能。了解更多详细信息，请查看[配置文档](/configuration)。
diff --git a/src/content/guides/hot-module-replacement.md b/src/content/guides/hot-module-replacement.md
index 72c52c83776e..61c0bb3f35e1 100755
--- a/src/content/guides/hot-module-replacement.md
+++ b/src/content/guides/hot-module-replacement.md
@@ -13,6 +13,7 @@ contributors:
- sbaidon
- gdi2290
- bdwain
+ - caryli
related:
- title: 概念 - 模块热替换(Hot Module Replacement)
url: /concepts/hot-module-replacement
@@ -52,6 +53,7 @@ __webpack.config.js__
+ hot: true
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
@@ -144,14 +146,15 @@ const webpack = require('webpack');
const config = require('./webpack.config.js');
const options = {
contentBase: './dist',
- hot: true
+ hot: true,
+ host: 'localhost'
};
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
-server.listen(5000, () => {
+server.listen(5000, 'localhost', () => {
console.log('dev server listening on port 5000');
});
```
@@ -240,6 +243,7 @@ __webpack.config.js__
+ ]
+ },
plugins: [
+ new CleanWebpackPlugin(['dist'])
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
diff --git a/src/content/guides/production.md b/src/content/guides/production.md
index 2dcae7d2a7aa..c2db77fc978b 100755
--- a/src/content/guides/production.md
+++ b/src/content/guides/production.md
@@ -13,6 +13,7 @@ contributors:
- redian
- skipjack
- xgqfrms
+ - kelset
---
在本指南中，我们将深入一些最佳实践，并且使用工具，将网站或应用程序构建到生产环境中。
@@ -175,6 +176,7 @@ __webpack.prod.js__
})
```
+T> 避免在生产中使用 `inline-***` 和 `eval-***`，因为它们可以增加 bundle 大小，并降低整体性能。
## 指定环境
@@ -191,8 +193,9 @@ __webpack.prod.js__
module.exports = merge(common, {
devtool: 'cheap-module-source-map',
plugins: [
-- new UglifyJSPlugin()
-+ new UglifyJSPlugin(),
+ new UglifyJSPlugin({
+ sourceMap: true
+ }),
+ new webpack.DefinePlugin({
+ 'process.env': {
+ 'NODE_ENV': JSON.stringify('production')
@@ -232,7 +235,7 @@ __src/index.js__
## CLI 替代选项
-以上描述也可以通过命令行实现。例如，`--optimize-minize` 标记将在后台引用 `UglifyJSPlugin`。和以上描述的 `DefinePlugin` 实例相同，`--define process.env.NODE_ENV="'production'"` 也会做同样的事情。并且，`webpack -p` 将自动地调用上述这些标记，从而调用需要引入的插件。
+以上描述也可以通过命令行实现。例如，`--optimize-minimize` 标记将在后台引用 `UglifyJSPlugin`。和以上描述的 `DefinePlugin` 实例相同，`--define process.env.NODE_ENV="'production'"` 也会做同样的事情。并且，`webpack -p` 将自动地调用上述这些标记，从而调用需要引入的插件。
这些简便方式虽然都很不错，但是我们通常建议只使用配置方式，因为在这两种场景中下，配置方式能够更好地帮助你了解自己正在做的事情。配置方式还可以让你更方便地控制这两个插件中的其他选项。
diff --git a/src/content/guides/typescript.md b/src/content/guides/typescript.md
index 197a8deeb308..423d9ebcc8d6 100755
--- a/src/content/guides/typescript.md
+++ b/src/content/guides/typescript.md
@@ -47,7 +47,7 @@ __tsconfig.json__
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
- "module": "commonjs",
+ "module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
diff --git a/src/content/license.md b/src/content/license.md
index c3718452b1ce..01e6da0df906 100755
--- a/src/content/license.md
+++ b/src/content/license.md
@@ -1,5 +1,6 @@
---
title: 遵循协议
+sort: 4
---
## webpack
diff --git a/src/content/loaders/babel-loader.md b/src/content/loaders/babel-loader.md
index 773f78a73cec..3d9cce904101 100644
--- a/src/content/loaders/babel-loader.md
+++ b/src/content/loaders/babel-loader.md
@@ -5,7 +5,6 @@ edit: https://github.com/babel/babel-loader/edit/master/README.md
repo: https://github.com/babel/babel-loader
---
-
This package allows transpiling JavaScript files using [Babel](https://github.com/babel/babel) and [webpack](https://github.com/webpack/webpack).
@@ -52,7 +51,7 @@ module: {
}
```
-### 选项
+##
参考 `babel` [选项](https://babeljs.io/docs/usage/api/#options)。
diff --git a/src/content/loaders/bundle-loader.md b/src/content/loaders/bundle-loader.md
index a98c2f636c3a..1b3b2374120a 100644
--- a/src/content/loaders/bundle-loader.md
+++ b/src/content/loaders/bundle-loader.md
@@ -2,7 +2,10 @@
title: bundle-loader
source: https://raw.githubusercontent.com/webpack-contrib/bundle-loader/master/README.md
edit: https://github.com/webpack-contrib/bundle-loader/edit/master/README.md
+repo: https://github.com/webpack-contrib/bundle-loader
---
+Bundle loader for webpack
+
## 安装
```bash
@@ -11,65 +14,134 @@ npm i bundle-loader --save
## 用法
-``` javascript
-// 当你引用 bundle 的时候，chunk 会被浏览器加载。
-var waitForChunk = require("bundle-loader!./file.js");
+**webpack.config.js**
+```js
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.bundle\.js$/,
+ use: 'bundle-loader'
+ }
+ ]
+ }
+}
+```
+
+The chunk is requested, when you require the bundle.
+
+**file.js**
+```js
+import bundle from './file.bundle.js';
+```
+
+To wait until the chunk is available (and get the exports)
+you need to async wait for it.
-// 为了等待 chunk 的加载完成 (而且为了拿到 exports 输出)
-// 你需要异步去等待它
-waitForChunk(function(file) {
- // 这里可以使用file，就像是用下面的代码require进来一样
- // var file = require("./file.js");
+```js
+bundle((file) => {
+ // use the file like it was required
+ const file = require('./file.js')
});
-// 将 require 包裹在 require.ensure 的代码块中
+```
+
+This wraps the `require('file.js')` in a `require.ensure` block
-// Multiple callbacks can be added. They will be executed in the order of addition.
-waitForChunk(callbackTwo);
-waitForChunk(callbackThree);
-// If a callback is added after dependencies were loaded, it will be called immediately.
+Multiple callbacks can be added. They will be executed in the order of addition.
+
+```js
+bundle(callbackTwo)
+bundle(callbackThree)
```
-当你引用 bundle 的时候，chunk 会被浏览器加载。如果你想它懒加载，请用：
+If a callback is added after dependencies were loaded, it will be called immediately.
-``` javascript
-var load = require("bundle-loader?lazy!./file.js");
+## Options
-// bundle 不会被加载，除非你调用了 call 函数
-load(function(file) {
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|**`lazy`**|`{Boolean}`|`false`|Loads the imported bundle asynchronously|
+|**`name`**|`{String}`|`[id].[name]`|Configure a custom filename for your imported bundle|
-});
+##
+
+The file is requested when you require the `bundle-loader`. If you want it to request it lazy, use:
+
+**webpack.config.js**
+```js
+{
+ loader: 'bundle-loader',
+ options: {
+ lazy: true
+ }
+}
```
-### `name` query parameter
-你可能会使用 `name` 查询参数给 bundle 设置名称。
-请查看[文档](https://github.com/webpack/loader-utils#interpolatename).
+```js
+import bundle from './file.bundle.js'
-**Note** chunks created by the loader will be named according to the
-[`output.chunkFilename`](https://webpack.js.org/configuration/output/#output-chunkfilename) rule, which defaults to `[id].[name]`.
-Here `[name]` corresponds to the chunk name set in the `name` query parameter.
+bundle((file) => {...})
+```
-#### Example:
+> ℹ️ The chunk is not requested until you call the load function
-``` js
-require("bundle-loader?lazy&name=my-chunk!./file.js");
-require("bundle-loader?lazy&name=[name]!./file.js");
+### `name`
+
+You may set name for a bundle using the `name` options parameter.
+See [documentation](https://github.com/webpack/loader-utils#interpolatename).
+
+**webpack.config.js**
+```js
+{
+ loader: 'bundle-loader',
+ options: {
+ name: '[name]'
+ }
+}
+```
+
+> :warning: chunks created by the loader will be named according to the
+[`output.chunkFilename`](https://webpack.js.org/configuration/output/#output-chunkfilename) rule, which defaults to `[id].[name]`. Here `[name]` corresponds to the chunk name set in the `name` options parameter.
+
+## Examples
+
+```js
+import bundle from './file.bundle.js'
```
-And the webpack configuration:
+
+**webpack.config.js**
``` js
module.exports = {
- entry: { ... },
- output : {
- path : ...,
- filename : '[name].js',
- chunkFilename : '[name]-[id].js', // or whatever other format you want.
- },
+ entry: {
+ index: './App.js'
+ },
+ output: {
+ path: path.resolve(__dirname, 'dest'),
+ filename: '[name].js',
+ // or whatever other format you want
+ chunkFilename: '[name].[id].js',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.bundle\.js$/,
+ use: {
+ loader: 'bundle-loader'
+ options: {
+ name: 'my-chunk'
+ }
+ }
+ }
+ ]
+ }
}
```
-Normal chunks will show up using the `filename` rule above, and be named according to their chunkname.
-Chunks from `bundle-loader`, however will load using the `chunkFilename` rule, so the example files will produce `my-chunk-1.js` and `file-2.js` respectively.
+Normal chunks will show up using the `filename` rule above, and be named according to their `[chunkname]`.
+
+Chunks from `bundle-loader`, however will load using the `chunkFilename` rule, so the example files will produce `my-chunk.1.js` and `file-2.js` respectively.
-You can also use `chunkFilename` to add hash values to the filename, since putting `[hash]` in the bundle query parameter does not work correctly.
+You can also use `chunkFilename` to add hash values to the filename, since putting `[hash]` in the bundle options parameter does not work correctly.
## Maintainers
@@ -77,28 +149,32 @@ You can also use `chunkFilename` to add hash values to the filename, since putti
-
+The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.
## 安装
diff --git a/src/content/loaders/extract-loader.md b/src/content/loaders/extract-loader.md
index cce7a6223fcc..c04a97addfc9 100644
--- a/src/content/loaders/extract-loader.md
+++ b/src/content/loaders/extract-loader.md
@@ -35,7 +35,7 @@ Installation
Examples
------------------------------------------------------------------------
-### [Extracting a main.css](https://github.com/peerigon/extract-loader/tree/master/examples/main-css)
+##
Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or [hot module replacement](http://webpack.github.io/docs/hot-module-replacement-with-webpack.html) in development. In production, on the other hand, it's not a good idea to apply your stylesheets depending on JS execution. Rendering may be delayed or even a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's still better to have them as separate files in your final production build.
diff --git a/src/content/loaders/file-loader.md b/src/content/loaders/file-loader.md
index 4694b9840723..7763d65dca34 100644
--- a/src/content/loaders/file-loader.md
+++ b/src/content/loaders/file-loader.md
@@ -4,9 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/file-loader/master/REA
edit: https://github.com/webpack-contrib/file-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/file-loader
---
-
-
Instructs webpack to emit the required object as file and to return its public URL
-
+Instructs webpack to emit the required object as file and to return its public URL
## 安装
@@ -51,17 +49,19 @@ Emits `file.png` as file in the output directory and returns the public URL
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
-|**`name`**|`{String}`|`[hash].[ext]`|Configure a custom filename template for your file|
+|**`name`**|`{String\|Function}`|`[hash].[ext]`|Configure a custom filename template for your file|
|**`context`**|`{String}`|`this.options.context`|Configure a custom file context, defaults to `webpack.config.js` [context](https://webpack.js.org/configuration/entry-context/#context)|
|**`publicPath`**|`{String\|Function}`|[`__webpack_public_path__ `](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)|Configure a custom `public` path for your files|
|**`outputPath`**|`{String\|Function}`|`'undefined'`|Configure a custom `output` path for your files|
|**`useRelativePath`**|`{Boolean}`|`false`|Should be `true` if you wish to generate a `context` relative URL for each file|
|**`emitFile`**|`{Boolean}`|`true`|By default a file is emitted, however this can be disabled if required (e.g. for server side packages)|
-### `name`
+##
You can configure a custom filename template for your file using the query parameter `name`. For instance, to copy a file from your `context` directory into the output directory retaining the full directory structure, you might use
+#### `{String}`
+
**webpack.config.js**
```js
{
@@ -72,6 +72,24 @@ You can configure a custom filename template for your file using the query param
}
```
+#### `{Function}`
+
+**webpack.config.js**
+```js
+{
+ loader: 'file-loader',
+ options: {
+ name (file) {
+ if (env === 'development') {
+ return '[path][name].[ext]'
+ }
+
+ return '[hash].[ext]'
+ }
+ }
+}
+```
+
#### `placeholders`
|Name|Type|Default|Description|
@@ -117,7 +135,7 @@ You can specify custom `output` and `public` paths by using `outputPath`, `publi
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
- publicPath: 'assets'
+ publicPath: 'assets/'
}
}
```
@@ -130,7 +148,7 @@ You can specify custom `output` and `public` paths by using `outputPath`, `publi
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
- outputPath: 'images'
+ outputPath: 'images/'
}
}
```
diff --git a/src/content/loaders/gzip-loader.md b/src/content/loaders/gzip-loader.md
index a601b82b6f84..ff701ae1f3c6 100644
--- a/src/content/loaders/gzip-loader.md
+++ b/src/content/loaders/gzip-loader.md
@@ -4,9 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/gzip-loader/master/REA
edit: https://github.com/webpack-contrib/gzip-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/gzip-loader
---
-
-
Exports HTML as string. HTML is minimized when the compiler demands.
-
+Exports HTML as string. HTML is minimized when the compiler demands.
## 安装
@@ -141,7 +139,7 @@ module: {
}
```
-### 'Root-relative' URLs
+##
对于以 `/` 开头的 url，默认行为是不转换它们。
如果设置了 `root` 查询参数，它将被添加到 URL 之前，然后进行转换。
diff --git a/src/content/loaders/i18n-loader.md b/src/content/loaders/i18n-loader.md
index 6b1ae7d1aa0c..8f575e9483a2 100644
--- a/src/content/loaders/i18n-loader.md
+++ b/src/content/loaders/i18n-loader.md
@@ -4,7 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/i18n-loader/master/REA
edit: https://github.com/webpack-contrib/i18n-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/i18n-loader
---
-# i18n loader for webpack
+
## 用法
diff --git a/src/content/loaders/imports-loader.md b/src/content/loaders/imports-loader.md
index 67036b3563fb..c6101d32d008 100644
--- a/src/content/loaders/imports-loader.md
+++ b/src/content/loaders/imports-loader.md
@@ -4,9 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/imports-loader/master/
edit: https://github.com/webpack-contrib/imports-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/imports-loader
---
-
-
The imports loader allows you to use modules that depend on specific global variables.
-
+The imports loader allows you to use modules that depend on specific global variables.
This is useful for third-party modules that rely on global variables like `$` or `this` being the `window` object. The imports loader can add the necessary `require('whatever')` calls, so those modules work with webpack.
@@ -32,7 +30,7 @@ require("imports-loader?$=jquery!./example.js");
这将简单的把 `var $ = require("jquery");` 前置插入到 `example.js` 中。
-### 语法
+##
loader 查询值 | 含义
------------|-------
diff --git a/src/content/loaders/istanbul-instrumenter-loader.md b/src/content/loaders/istanbul-instrumenter-loader.md
index 79c7536032c1..aba7228cf254 100644
--- a/src/content/loaders/istanbul-instrumenter-loader.md
+++ b/src/content/loaders/istanbul-instrumenter-loader.md
@@ -5,7 +5,6 @@ edit: https://github.com/webpack-contrib/istanbul-instrumenter-loader/edit/maste
repo: https://github.com/webpack-contrib/istanbul-instrumenter-loader
---
-
Instrument JS files with [istanbul-lib-instrument](https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-lib-instrument) for subsequent code coverage reporting
@@ -17,7 +16,7 @@ npm i -D istanbul-instrumenter-loader
## 用法
-### `参考`
+##
* [karma-webpack](https://github.com/webpack/karma-webpack)
* [karma-coverage-istanbul-reporter](https://github.com/mattlewis92/karma-coverage-istanbul-reporter)
@@ -92,6 +91,7 @@ config.set({
You must run the instrumentation as a post step
+**webpack.config.js**
```js
{
test: /\.js$|\.jsx$/,
@@ -119,6 +119,7 @@ You must run the instrumentation as a post step
|**`produceSourceMap`**|`{Boolean}`|`false`|Set to `true` to produce a source map for the instrumented code|
|**`sourceMapUrlCallback`**|`{Function}`|`null`|A callback function that is called when a source map URL is found in the original code. This function is called with the source filename and the source map URL|
+**webpack.config.js**
```js
{
test: /\.js$/,
diff --git a/src/content/loaders/jshint-loader.md b/src/content/loaders/jshint-loader.md
index 81f98c31d04f..4f3806b73e7a 100644
--- a/src/content/loaders/jshint-loader.md
+++ b/src/content/loaders/jshint-loader.md
@@ -4,9 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/jshint-loader/master/R
edit: https://github.com/webpack-contrib/jshint-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/jshint-loader
---
-
-
Use the [css-loader](/loaders/css-loader/) or the [raw-loader](/loaders/raw-loader/) to turn it into a JS module and the [ExtractTextPlugin](/plugins/extract-text-webpack-plugin/) to extract it into a separate file.
@@ -68,7 +70,7 @@ module.exports = {
Unfortunately, Less doesn't map all options 1-by-1 to camelCase. When in doubt, [check their executable and search for the dash-case option](https://github.com/less/less.js/blob/3.x/bin/lessc).
-### In production
+##
Usually, it's recommended to extract the style sheets into a dedicated file in production using the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin). This way your styles are not dependent on JavaScript:
diff --git a/src/content/loaders/mocha-loader.md b/src/content/loaders/mocha-loader.md
index 7ea12f5d9396..48a0dfe911f2 100644
--- a/src/content/loaders/mocha-loader.md
+++ b/src/content/loaders/mocha-loader.md
@@ -4,9 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/mocha-loader/master/RE
edit: https://github.com/webpack-contrib/mocha-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/mocha-loader
---
-
-
Allows Mocha tests to be loaded and run via webpack
-
+Allows Mocha tests to be loaded and run via webpack
## 安装
@@ -16,7 +14,7 @@ npm install --save-dev mocha-loader
## 用法
-### 配置（推荐）
+##
**webpack.config.js**
```js
diff --git a/src/content/loaders/multi-loader.md b/src/content/loaders/multi-loader.md
index a095bab1d702..7a86d90dff1f 100644
--- a/src/content/loaders/multi-loader.md
+++ b/src/content/loaders/multi-loader.md
@@ -4,9 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/multi-loader/master/RE
edit: https://github.com/webpack-contrib/multi-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/multi-loader
---
-
-
This loader requires a module multiple times, each time loaded with a different loader. Like in a multi entry point the exports of the last item are exported.
-
+This loader requires a module multiple times, each time loaded with a different loader. Like in a multi entry point the exports of the last item are exported.
## 安装
diff --git a/src/content/loaders/node-loader.md b/src/content/loaders/node-loader.md
index b5044a877f8f..55edd0e44720 100644
--- a/src/content/loaders/node-loader.md
+++ b/src/content/loaders/node-loader.md
@@ -4,9 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/node-loader/master/REA
edit: https://github.com/webpack-contrib/node-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/node-loader
---
-
-
+Loads a SASS/SCSS file and compiles it to CSS.
Use the [css-loader](/loaders/css-loader/) or the [raw-loader](/loaders/raw-loader/) to turn it into a JS module and the [ExtractTextPlugin](/plugins/extract-text-webpack-plugin/) to extract it into a separate file.
Looking for the webpack 1 loader? Check out the [archive/webpack-1 branch](https://github.com/webpack-contrib/sass-loader/tree/archive/webpack-1).
@@ -68,7 +66,7 @@ module.exports = {
Sass 的更多选项参见 [node-sass](https://github.com/andrew/node-sass)。
-### 生产环境
+##
通常，生产环境下比较推荐的做法是，使用 [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) 将样式表抽离成专门的单独文件。这样，样式表将不再依赖于 JavaScript：
diff --git a/src/content/loaders/script-loader.md b/src/content/loaders/script-loader.md
index 1de6e86a348b..ec3a3b9091d5 100644
--- a/src/content/loaders/script-loader.md
+++ b/src/content/loaders/script-loader.md
@@ -5,7 +5,6 @@ edit: https://github.com/webpack-contrib/script-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/script-loader
---
-
## 安装
@@ -19,7 +18,7 @@ npm install --save-dev script-loader
> :警告: 在 node.js 中不会运行
-### 配置（推荐）
+##
```js
import exec from 'script.exec.js';
diff --git a/src/content/loaders/source-map-loader.md b/src/content/loaders/source-map-loader.md
index be6164bde9cd..a1cdfecd581d 100644
--- a/src/content/loaders/source-map-loader.md
+++ b/src/content/loaders/source-map-loader.md
@@ -4,9 +4,7 @@ source: https://raw.githubusercontent.com/webpack-contrib/source-map-loader/mast
edit: https://github.com/webpack-contrib/source-map-loader/edit/master/README.md
repo: https://github.com/webpack-contrib/source-map-loader
---
-
-
Extracts source maps from existing source files (from their sourceMappingURL).
+
+
-
- Juho Vepsäläinen
+
+ 
+
+ Juho Vepsäläinen
+
-
- Joshua Wiens
+
+ 
+
+ Joshua Wiens
+
-
- Kees Kluskens
+
+ 
+
+ Michael Ciniawsky
+
-
- Sean Larkin
+
+ 
+
+ Alexander Krasnoyarov
+