From f2a258ae97e289e821a3d3813e510b6f300c1fed Mon Sep 17 00:00:00 2001
From: lizhihua <275091674@qq.com>
Date: Sun, 3 Sep 2017 20:42:43 +0800
Subject: [PATCH 01/88] update /content/loaders & /content/plugins
---
src/content/loaders/css-loader.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/loaders/css-loader.md b/src/content/loaders/css-loader.md
index 5dd23e6c870a..cba38c16f05f 100644
--- a/src/content/loaders/css-loader.md
+++ b/src/content/loaders/css-loader.md
@@ -133,7 +133,7 @@ url(~module/image.png) => require('module/image.png')
Rewrite your urls with alias, this is useful when it's hard to change url paths of your input files, for example, when you're using some css / sass files in another package (bootstrap, ratchet, font-awesome, etc.).
-`css-loader`'s `alias` follows the same syntax as webpack's `resolve.alias`, you can see the details at the [resolve docs] (https://webpack.js.org/configuration/resolve/#resolve-alias)
+`css-loader`'s `alias` follows the same syntax as webpack's `resolve.alias`, you can see the details at the [resolve docs](https://webpack.js.org/configuration/resolve/#resolve-alias)
**file.scss**
```css
From 248be262b2ebb80a31f1ec04a3c5a826cd1191ec Mon Sep 17 00:00:00 2001
From: lizhihua <275091674@qq.com>
Date: Tue, 19 Sep 2017 09:38:06 +0800
Subject: [PATCH 02/88] update /content/loaders & /content/plugins
---
src/content/loaders/css-loader.md | 18 +++++++--------
src/content/loaders/style-loader.md | 34 +++++++++++++++++++++++++++--
src/content/loaders/url-loader.md | 10 +++++----
3 files changed, 47 insertions(+), 15 deletions(-)
diff --git a/src/content/loaders/css-loader.md b/src/content/loaders/css-loader.md
index cba38c16f05f..a0e7ff153775 100644
--- a/src/content/loaders/css-loader.md
+++ b/src/content/loaders/css-loader.md
@@ -86,15 +86,15 @@ It's useful when you, for instance, need to post process the CSS as a string.
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
-|**`root`**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
-|**`url`**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
-|**`alias`**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
-|**`import`** |`{Boolean}`|`true`| Enable/Disable @import handling|
-|**`modules`**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
-|**`minimize`**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
-|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
-|**`camelCase`**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
-|**`importLoaders`**|`{Number}`|`0`|Number of loaders applied before CSS loader|
+|**[`root`](#root)**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
+|**[`url`](#url)**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
+|**[`alias`](#alias)**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
+|**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable @import handling|
+|**[`modules`](#modules)**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
+|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
+|**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
+|**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
+|**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
|**`localIdentName`**|`{String}`|`[hash:base64]`|Configure the generated ident|
### `root`
diff --git a/src/content/loaders/style-loader.md b/src/content/loaders/style-loader.md
index 3a4e9507d462..8774f9205363 100644
--- a/src/content/loaders/style-loader.md
+++ b/src/content/loaders/style-loader.md
@@ -10,7 +10,7 @@ repo: https://github.com/webpack-contrib/style-loader
## Install
-```
+```bash
npm install style-loader --save-dev
```
@@ -130,14 +130,30 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
+|**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
|**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
|**`attrs`**|`{Object}`|`{}`|Add custom attrs to ``|
|**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
-|**`insertAt`**|`{String}`|`bottom`|Inserts `` at the given position|
+|**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `` at the given position|
|**`insertInto`**|`{String}`|``|Inserts `` into the given position|
|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
+### `hmr`
+
+Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
+This could be used for non local development and production.
+
+**webpack.config.js**
+```js
+{
+ loader: 'style-loader'
+ options: {
+ hmr: false
+ }
+}
+```
+
### `base`
This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s. `base` allows you to prevent either the *app*'s css (or *DllPlugin2*'s css) from overwriting *DllPlugin1*'s css by specifying a css module id base which is greater than the range used by *DllPlugin1* e.g.:
@@ -281,6 +297,20 @@ By default, the style-loader appends `` tag.
-
-```js
-import url from 'file.css'
-```
-
-**webpack.config.js**
-```js
-{
- module: {
- rules: [
- {
- test: /\.css$/,
- use: [
- { loader: "style-loader/url" },
- { loader: "file-loader" }
- ]
- }
- ]
- }
-}
-```
-
-```html
-
-```
-
-> :information_source: Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
-
-### `Useable`
-
-By convention the `Reference Counter API` should be bound to `.useable.css` and the `.css` should be loaded with basic `style-loader` usage.(similar to other file types, i.e. `.useable.less` and `.less`).
-
-**webpack.config.js**
-```js
-{
- module: {
- rules: [
- {
- test: /\.css$/,
- use: [
- { loader: "style-loader" },
- { loader: "css-loader" },
- ],
- },
- {
- test: /\.useable\.css$/,
- use: [
- {
- loader: "style-loader/useable"
- },
- { loader: "css-loader" },
- ],
- },
- ],
- },
-}
-```
-
-#### `Reference Counter API`
-
-**component.js**
-```js
-import style from './file.css'
-
-style.use(); // = style.ref();
-style.unuse(); // = style.unref();
-```
-
-Styles are not added on `import/require()`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`.
-
-:warning: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
-
-## Options
-
-|Name|Type|Default|Description|
-|:--:|:--:|:-----:|:----------|
-|**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
-|**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
-|**`attrs`**|`{Object}`|`{}`|Add custom attrs to ``|
-|**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
-|**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `` at the given position|
-|**`insertInto`**|`{String}`|``|Inserts `` into the given position|
-|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
-|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
-
-### `hmr`
-
-Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
-This could be used for non local development and production.
-
-**webpack.config.js**
-```js
-{
- loader: 'style-loader',
- options: {
- hmr: false
- }
-}
-```
-
-### `base`
-
-This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s. `base` allows you to prevent either the *app*'s css (or *DllPlugin2*'s css) from overwriting *DllPlugin1*'s css by specifying a css module id base which is greater than the range used by *DllPlugin1* e.g.:
-
-**webpack.dll1.config.js**
-```js
-{
- test: /\.css$/,
- use: [
- 'style-loader',
- 'css-loader'
- ]
-}
-```
-
-**webpack.dll2.config.js**
-```js
-{
- test: /\.css$/,
- use: [
- { loader: 'style-loader', options: { base: 1000 } },
- 'css-loader'
- ]
-}
-```
-
-**webpack.app.config.js**
-```
-{
- test: /\.css$/,
- use: [
- { loader: 'style-loader', options: { base: 2000 } },
- 'css-loader'
- ]
-}
-```
-
-### `attrs`
-
-If defined, style-loader will attach given attributes with their values on `
-```
-
-#### `Url`
-
-**component.js**
-```js
-import link from './file.css'
-```
-
-**webpack.config.js**
-```js
-{
- test: /\.css$/,
- use: [
- { loader: 'style-loader/url', options: { attrs: { id: 'id' } } }
- { loader: 'file-loader' }
- ]
-}
-```
-
-### `transform`
-
-A `transform` is a function that can modify the css just before it is loaded into the page by the style-loader.
-This function will be called on the css that is about to be loaded and the return value of the function will be loaded into the page instead of the original css.
-If the return value of the `transform` function is falsy, the css will not be loaded into the page at all.
-
-**webpack.config.js**
-```js
-{
- loader: 'style-loader',
- options: {
- transform: 'path/to/transform.js'
- }
-}
-```
-
-**transform.js**
-```js
-module.exports = function (css) {
- // Here we can change the original css
- const transformed = css.replace('.classNameA', '.classNameB')
-
- return transformed
-}
-```
-
-#### `Conditional`
-
-**webpack.config.js**
-```js
-{
- loader: 'style-loader',
- options: {
- transform: 'path/to/conditional.js'
- }
-}
-```
-
-**conditional.js**
-```js
-module.exports = function (css) {
- // If the condition is matched load [and transform] the CSS
- if (css.includes('something I want to check')) {
- return css;
- }
- // If a falsy value is returned, the CSS won't be loaded
- return false
-}
-```
-
-### `insertAt`
-
-By default, the style-loader appends `` tag.
+
+```js
+import url from 'file.css'
+```
+
+**webpack.config.js**
+```js
+{
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ { loader: "style-loader/url" },
+ { loader: "file-loader" }
+ ]
+ }
+ ]
+ }
+}
+```
+
+```html
+
+```
+
+> :information_source: Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
+
+### `Useable`
+
+By convention the `Reference Counter API` should be bound to `.useable.css` and the `.css` should be loaded with basic `style-loader` usage.(similar to other file types, i.e. `.useable.less` and `.less`).
+
+**webpack.config.js**
+```js
+{
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ { loader: "style-loader" },
+ { loader: "css-loader" },
+ ],
+ },
+ {
+ test: /\.useable\.css$/,
+ use: [
+ {
+ loader: "style-loader/useable"
+ },
+ { loader: "css-loader" },
+ ],
+ },
+ ],
+ },
+}
+```
+
+#### `Reference Counter API`
+
+**component.js**
+```js
+import style from './file.css'
+
+style.use(); // = style.ref();
+style.unuse(); // = style.unref();
+```
+
+Styles are not added on `import/require()`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`.
+
+:warning: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
+
+## Options
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
+|**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
+|**`attrs`**|`{Object}`|`{}`|Add custom attrs to ``|
+|**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
+|**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `` at the given position|
+|**`insertInto`**|`{String}`|``|Inserts `` into the given position|
+|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
+|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
+
+### `hmr`
+
+Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
+This could be used for non local development and production.
+
+**webpack.config.js**
+```js
+{
+ loader: 'style-loader',
+ options: {
+ hmr: false
+ }
+}
+```
+
+### `base`
+
+This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s. `base` allows you to prevent either the *app*'s css (or *DllPlugin2*'s css) from overwriting *DllPlugin1*'s css by specifying a css module id base which is greater than the range used by *DllPlugin1* e.g.:
+
+**webpack.dll1.config.js**
+```js
+{
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+}
+```
+
+**webpack.dll2.config.js**
+```js
+{
+ test: /\.css$/,
+ use: [
+ { loader: 'style-loader', options: { base: 1000 } },
+ 'css-loader'
+ ]
+}
+```
+
+**webpack.app.config.js**
+```
+{
+ test: /\.css$/,
+ use: [
+ { loader: 'style-loader', options: { base: 2000 } },
+ 'css-loader'
+ ]
+}
+```
+
+### `attrs`
+
+If defined, style-loader will attach given attributes with their values on `
+```
+
+#### `Url`
+
+**component.js**
+```js
+import link from './file.css'
+```
+
+**webpack.config.js**
+```js
+{
+ test: /\.css$/,
+ use: [
+ { loader: 'style-loader/url', options: { attrs: { id: 'id' } } }
+ { loader: 'file-loader' }
+ ]
+}
+```
+
+### `transform`
+
+A `transform` is a function that can modify the css just before it is loaded into the page by the style-loader.
+This function will be called on the css that is about to be loaded and the return value of the function will be loaded into the page instead of the original css.
+If the return value of the `transform` function is falsy, the css will not be loaded into the page at all.
+
+**webpack.config.js**
+```js
+{
+ loader: 'style-loader',
+ options: {
+ transform: 'path/to/transform.js'
+ }
+}
+```
+
+**transform.js**
+```js
+module.exports = function (css) {
+ // Here we can change the original css
+ const transformed = css.replace('.classNameA', '.classNameB')
+
+ return transformed
+}
+```
+
+#### `Conditional`
+
+**webpack.config.js**
+```js
+{
+ loader: 'style-loader',
+ options: {
+ transform: 'path/to/conditional.js'
+ }
+}
+```
+
+**conditional.js**
+```js
+module.exports = function (css) {
+ // If the condition is matched load [and transform] the CSS
+ if (css.includes('something I want to check')) {
+ return css;
+ }
+ // If a falsy value is returned, the CSS won't be loaded
+ return false
+}
+```
+
+### `insertAt`
+
+By default, the style-loader appends `
\ No newline at end of file
diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 3cae30b3eba3..1c8f9f3e5ff3 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import Cube from '../Cube/Cube';
import TextRotator from '../TextRotater/TextRotater';
-import Modules from '../../assets/homepage-modules.svg';
+import homeSVG from './SplashVizSVG';
export default class SplashViz extends React.Component {
@@ -18,9 +18,7 @@ export default class SplashViz extends React.Component {
styles
-
- Sponsor webpack and get apparel from the official shop
- or get stickers here! All proceeds go to our
+ Sponsor webpack and get apparel from the official shop{' '}
+ or get stickers here! All proceeds go to our{' '}
open collective!
- The following table contains a curated list of starter kits that can
- be used as a jumping off point for webpack-based projects. To add a new
- kit to the list please visit
- this repository
- and submit a PR against this file:
+ The following table contains a curated list of starter kits that can
+ be used as a jumping off point for webpack-based projects. To add a new
+ kit to the list please visit{' '}
+ this repository{' '}
+ and submit a PR against this file:
generator/starterProjectUrls.js.
- Boilerplates should be used as Proof of Concepts to help you learn
- different webpack techniques for various frameworks. Make sure you understand
- what's going on in them and avoid copy and paste coding. Also note that none
- of these are officially supported by webpack. If you run into an issue, please
+ Boilerplates should be used as Proof of Concepts to help you learn
+ different webpack techniques for various frameworks. Make sure you understand
+ what's going on in them and avoid copy and paste coding. Also note that none
+ of these are officially supported by webpack. If you run into an issue, please
report that to the maintainer(s) of the repository.
diff --git a/src/content/guides/migrating.md b/src/content/guides/migrating.md
index 9f39cd0ad74c..faca01aae0b4 100644
--- a/src/content/guides/migrating.md
+++ b/src/content/guides/migrating.md
@@ -544,7 +544,7 @@ webpack now supports template strings in expressions. This means you can start u
### Configuration Promise
-webpack now supports returning a `Promise` from the configuration file. This allows to do async processing in you configuration file.
+webpack now supports returning a `Promise` from the configuration file. This allows async processing in your configuration file.
**webpack.config.js**
From 232bf00caf744ebd91c0937170914db6aa24073d Mon Sep 17 00:00:00 2001
From: Eugene Epifanov
Date: Sun, 7 Jan 2018 12:13:55 +0700
Subject: [PATCH 85/88] docs(concepts): change loader order from chonological
to reverse (#1767)
When one starts to learn about loaders it's very confusing.
[This](https://webpack.js.org/contribute/writing-a-loader/#complex-usage)
explains the behaviour much better.
---
src/content/concepts/loaders.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/concepts/loaders.md b/src/content/concepts/loaders.md
index 4ea4b35654c7..99f40f3f1d95 100644
--- a/src/content/concepts/loaders.md
+++ b/src/content/concepts/loaders.md
@@ -101,7 +101,7 @@ This uses the `jade-loader` for `.jade` files, and the [`style-loader`](/loaders
## Loader Features
-* Loaders can be chained. They are applied in a pipeline to the resource. A chain of loaders are compiled chronologically. The first loader in a chain of loaders returns a value to the next. At the end loader, webpack expects JavaScript to be returned.
+* Loaders can be chained. They are applied in a pipeline to the resource. A chain of loaders are executed in reverse order. The first loader in a chain of loaders returns a value to the next. At the end loader, webpack expects JavaScript to be returned.
* Loaders can be synchronous or asynchronous.
* Loaders run in Node.js and can do everything that’s possible there.
* Loaders accept query parameters. This can be used to pass configuration to the loader.
From c46b22a42230f783c7c6e4fa7580c9c4f966dfcb Mon Sep 17 00:00:00 2001
From: lizhihua <275091674@qq.com>
Date: Sat, 13 Jan 2018 16:32:42 +0800
Subject: [PATCH 86/88] update UPDATE.md
---
UPDATE.md | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 UPDATE.md
diff --git a/UPDATE.md b/UPDATE.md
new file mode 100644
index 000000000000..14b8bbb3fc7c
--- /dev/null
+++ b/UPDATE.md
@@ -0,0 +1,5 @@
+## 更新记录
+
+### 2018.01.13
+* 合并记录：合并 master 分支
+* 合并记录：https://github.com/webpack-china/webpack.js.org/pull/433
From 7d79c30c1d59a9bbc64de587b381d7e04b61c764 Mon Sep 17 00:00:00 2001
From: lizhihua <275091674@qq.com>
Date: Sat, 13 Jan 2018 20:23:56 +0800
Subject: [PATCH 87/88]
https://github.com/webpack-china/webpack.js.org/pull/422
---
src/content/configuration/module.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/content/configuration/module.md b/src/content/configuration/module.md
index da2de560fdbc..9a95562bfad0 100755
--- a/src/content/configuration/module.md
+++ b/src/content/configuration/module.md
@@ -115,7 +115,7 @@ W> 小心！resource 是文件的_解析_路径，这意味着符号链接的资
## `Rule.issuer`
-A [`Condition`](#condition) to match against the module that issued the request. In the following example, the `issuer` for the `a.js` request would be the path to the `index.js` file.
+一个[`条件`](#condition)，用来与被发布的 request 对应的模块项匹配。在以下示例中，a.js request 的`发布者(issuer)`是 index.js 文件的路径。
__index.js__
@@ -123,7 +123,7 @@ __index.js__
import A from './a.js'
```
-This option can be used to apply loaders to the dependencies of a specific module or set of modules.
+这个选项可以用来将 loader 应用到一个特定模块或一组模块的依赖中。
## `Rule.loader`
From 8685372fb6f70e7e9fc5c51c5aad6e0d3e61d591 Mon Sep 17 00:00:00 2001
From: lizhihua <275091674@qq.com>
Date: Sat, 13 Jan 2018 20:36:15 +0800
Subject: [PATCH 88/88]
https://github.com/webpack-china/webpack.js.org/issues/40
---
src/content/guides/public-path.md | 34 +++++++++++++++++--------------
1 file changed, 19 insertions(+), 15 deletions(-)
diff --git a/src/content/guides/public-path.md b/src/content/guides/public-path.md
index df94f99620fd..d773379ef37b 100755
--- a/src/content/guides/public-path.md
+++ b/src/content/guides/public-path.md
@@ -1,5 +1,5 @@
---
-title: Public Path
+title: 公共路径(Public Path)
sort: 24
contributors:
- rafaelrinaldi
@@ -7,23 +7,23 @@ contributors:
- gonzoyumo
---
-The `publicPath` configuration option can be quite useful in a variety of scenarios. It allows you to specify the base path for all the assets within your application.
+webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为`公共路径(publicPath)`。
-## Use Cases
+## 示例
-There are a few use cases in real applications where this feature becomes especially neat. Essentially, every file emitted to your `output.path` directory will be referenced from the `output.publicPath` location. This includes child chunks (created via [code splitting](/guides/code-splitting/)) and any other assets (e.g. images, fonts, etc.) that are a part of your dependency graph.
+这里提供一些示例，在实际应用中，这些示例的特性在实现的同时，还能保持高度整洁。
-### Environment Based
+### 在构建项目时设置路径值
-In development for example, we might have an `assets/` folder that lives on the same level of our index page. This is fine, but what if we wanted to host all these static assets on a CDN in production?
+在开发模式中，我们通常有一个 `assets/` 文件夹，它往往存放在和首页一个级别的目录下。这样是挺方便；但是如果在生产环境下，你想把这些静态文件统一使用CDN加载，那该怎么办？
-To approach this problem you can easily use a good old environment variable. Let's say we have a variable `ASSET_PATH`:
+想要解决这个问题，你可以使用有着悠久历史的环境变量。比如说，我们设置了一个名为 `ASSET_PATH` 的变量：
``` js
import webpack from 'webpack';
-// Try the environment variable, otherwise use root
+// 如果预先定义过环境变量，就将其赋值给`ASSET_PATH`变量，否则赋值为根目录
const ASSET_PATH = process.env.ASSET_PATH || '/';
export default {
@@ -32,7 +32,7 @@ export default {
},
plugins: [
- // This makes it possible for us to safely use env vars on our code
+ // 该插件帮助我们安心地使用环境变量
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
})
@@ -40,22 +40,26 @@ export default {
};
```
-### On The Fly
+### 即时设定路径值
-Another possible use case is to set the `publicPath` on the fly. webpack exposes a global variable called `__webpack_public_path__` that allows you to do that. So, in your application's entry point, you can simply do this:
+另一个可能出现的情况是，我们需要即时设置公共路径。webpack 提供一个全局变量供你设置，它名叫 `__webpack_public_path__`。所以在你的项目入口，你可以简单地设置如下：
```js
__webpack_public_path__ = process.env.ASSET_PATH;
```
-That's all you need. Since we're already using the `DefinePlugin` on our
-configuration, `process.env.ASSET_PATH` will always be defined so we can safely
-do that.
+一切设置完成。因为我们已经在我们的配置项中使用了`DefinePlugin`，
+`process.env.ASSET_PATH` 就已经被定义了，
+所以让我们能够安心地使用它了。
-W> Be aware that if you use ES6 module imports in your entry file the `__webpack_public_path__` assignment will be done after the imports. In such cases, you'll have to move the public path assignment to its own dedicated module and then import it on top of your entry.js:
+**警告：**请注意，如果您在入口文件中使用 ES6 模块导入，则在导入后对 `__webpack_public_path__` 进行赋值。在这种情况下，您必须将公共路径(public path)赋值移至自己的专属模块，然后将其导入到您的 entry.js 之上：
```js
// entry.js
import './public-path';
import './app';
```
+
+***
+
+> 原文：https://webpack.js.org/guides/public-path/