You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/concepts/entry-points.md
+20-20Lines changed: 20 additions & 20 deletions
Original file line number
Diff line number
Diff line change
@@ -3,11 +3,11 @@ title: 入口
3
3
sort: 0
4
4
---
5
5
6
-
Like we mentioned in the [introduction](./), there are multiple ways to define the `entry`property in your webpack configuration. We will show you the ways how you **can** configure the `entry`property, in addition to explaining why it may be useful to you.
The single entry syntax for the `entry`property is a short hand for:
22
+
`entry`属性的单入口语法是下面的简写:
23
23
24
24
```javascript
25
25
constconfig= {
@@ -29,13 +29,13 @@ const config = {
29
29
};
30
30
```
31
31
32
-
T> **What happens when you pass an array to `entry`?** Passing an array of file paths to the `entry`property creates what is known as a **"multi-main entry"**. This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".
This is a great choice when you are looking to quickly setup a webpack configuration for an application or tool with one entry point (IE: a library). However, there is not much flexibility in extending or scaling your configuration with this syntax.
The object syntax is more verbose. However, this is the most scalable way of defining entry/entries in your application.
51
+
对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。
52
52
53
-
T> **"Scalable webpack configurations"** are ones that can be reused and combined with other partial configurations. This is a popular technique used to separate concerns by environment, build target and runtime. They are then merged together using specialized tools like [webpack-merge](https://github.com/survivejs/webpack-merge).
Below is a list of entry configurations and their real-world use cases:
57
+
以下列出入口配置和它们的实际用例:
58
58
59
-
#### Separate App and Vendor Entries
59
+
#### 入口分离 应用(app) 和 公共库(vendor)
60
60
61
61
**webpack.config.js**
62
62
@@ -69,11 +69,11 @@ const config = {
69
69
};
70
70
```
71
71
72
-
**What does this do?** At face value this tells webpack to create dependency graphs starting at both `app.js`and`vendors.js`. These graphs are completely separate and independent of each other (there will be a webpack bootstrap in each bundle). This is commonly seen with single page applications which have only one entry point (excluding vendors).
**Why?** This setup allows you to leverage [`CommonsChunkPlugin`](../../api/plugins/commonschunkplugin) and extract any vendor references from your app bundle into your vendor bundle, replacing them with `__webpack_require__()`calls. If there is no vendor code in your application bundle, then you can achieve a common pattern in webpack known as [long-term vendor-caching.](../../how-to/cache).
**What does this do?** We are telling webpack that we would like 4 separate dependency graphs (like the above example).
91
+
**是什么?**我们告诉 webpack 需要 4 个独立分离的依赖图表(如上面的例子)。
92
92
93
-
**Why?** In a multi-page application, the server is going to fetch a new HTML document for you. The page reloads this new document and assets are redownloaded. However, this gives us the unique opportunity to do multiple things:
93
+
**为什么?**在多页应用中,服务器将为您获取一个新的 HTML 文档。页面重新加载新文档,并且资源被重新下载。然而,这给了我们独特的机会去做很多事:
94
94
95
-
-Use[`CommonsChunkPlugin`](../../api/plugins/commonschunkplugin)to create bundles of shared application code between each page. Multi-page applications that reuse a lot of code/modules between entry points can greatly benefit from these techniques, as the amount of entry points increase.
T> You may see the term **emitted** or **emit** used throughout our documentation and [plugin API](../api/plugins). This is a fancy term for "produced or discharged".
0 commit comments