Skip to content

Commit 5a7aaf8

Browse files
committed
Merge branch 'master' into cn
# Conflicts: # content/configuration/target.md # content/guides/production-build.md
2 parents c521bc0 + 049895a commit 5a7aaf8

File tree

3 files changed

+92
-3
lines changed

3 files changed

+92
-3
lines changed

content/configuration/target.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ webpack 能够为多种环境或 _target_ 构建编译。想要理解什么是 t
2020
| `target` | 描述 |
2121
| ------------- |------------------------|
2222
| `async-node`| 编译为类 Node.js 环境可用(使用 fs 和 vm 异步加载分块) |
23-
| `electron` | 编译为 [Electron](http://electron.atom.io/) 渲染进程,使用 `JsonpTemplatePlugin`, `FunctionModulePlugin` 来为浏览器环境提供目标,使用 `NodeTargetPlugin``ExternalsPlugin` 为 CommonJS 和 Electron 内置模块提供目标。 |
24-
| `electron-renderer` | [Electron](http://electron.atom.io/) `renderer-process` 编译。 |
25-
| `"node"` | 编译为类 Node.js 环境可用(使用 Node.js `require` 加载分块|
23+
| `electron` | `electron-main` 的别名 |
24+
| `electron-main` | 编译为 [Electron](http://electron.atom.io/) 渲染进程,使用 `JsonpTemplatePlugin`, `FunctionModulePlugin` 来为浏览器环境提供目标,使用 `NodeTargetPlugin``ExternalsPlugin` 为 CommonJS 和 Electron 内置模块提供目标。 |
25+
| `node` | 编译为类 Node.js 环境可用(使用 Node.js `require` 加载 chunk|
2626
|`node-webkit`| 编译为 Webkit 可用,并且使用 jsonp 去加载分块。支持 Node.js 内置模块和 [`nw.gui`](http://docs.nwjs.io/en/latest/) 导入(实验性质) |
2727
|`web`| 编译为类浏览器环境里可用**(默认)** |
2828
|`webworker`| 编译成一个 WebWorker |

content/plugins/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Plugins
33
contributors:
44
- simon04
5+
- gonzoyumo
56
---
67

78
webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**.
@@ -14,6 +15,7 @@ webpack has a rich plugin interface. Most of the features within webpack itself
1415
|[`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)|Prepare compressed versions of assets to serve them with Content-Encoding|
1516
|[`I18nWebpackPlugin`](/plugins/i18n-webpack-plugin)|Adds i18n support to your bundles|
1617
|[`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)| Simplifies creation of HTML files (`index.html`) to serve your bundles|
18+
|[`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)|Replaces resource that matches a regexp|
1719

1820

1921
![Awesome](../assets/awesome-badge.svg)
Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: NormalModuleReplacementPlugin
3+
contributors:
4+
- gonzoyumo
5+
---
6+
## Install
7+
8+
The `NormalModuleReplacementPlugin` is a built-in webpack plugin.
9+
10+
11+
## Usage
12+
13+
``` javascript
14+
new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource)
15+
```
16+
17+
The `NormalModuleReplacementPlugin` allows you to replace resources that match `resourceRegExp` with `newResource`. If `newResource` is relative, it is resolved relative to the previous resource. If `newResource` is a function, it is expected to overwrite the request attribute of the supplied resource.
18+
19+
This can be useful for allowing different behaviour between builds.
20+
21+
## Basic example
22+
23+
Replace a specific module when building for development environment ([read more](/configuration/environment)).
24+
25+
26+
Say you have a config file `some/path/config.development.module.js` and a special version for production in `some/path/config.production.module.js`
27+
28+
Just add the following plugin when building for production:
29+
30+
``` javascript
31+
new webpack.NormalModuleReplacementPlugin(
32+
/some\/path\/config\.development\.js/,
33+
'./config.production.js'
34+
);
35+
```
36+
37+
## Advanced example
38+
39+
Conditional build depending on an environment var ([read more](/configuration/environment)).
40+
41+
Say you want a configuration with specific values for different build targets.
42+
43+
``` javascript
44+
module.exports = function(env) {
45+
var appTarget = env.APP_TARGET || 'VERSION_A';
46+
return {
47+
plugins: [
48+
new webpack.NormalModuleReplacementPlugin(/(.*)-APP_TARGET(\.*)/, function(resource) {
49+
resource.request = resource.request.replace(/-APP_TARGET/, `-${appTarget}`);
50+
})
51+
]
52+
}
53+
54+
}
55+
```
56+
57+
Create the two config files:
58+
59+
**app/config-VERSION_A.js:**
60+
``` javascript
61+
export default {
62+
title : 'I am version A'
63+
}
64+
```
65+
**app/config-VERSION_B.js:**
66+
``` javascript
67+
export default {
68+
title : 'I am version B'
69+
}
70+
```
71+
Then import that config using the keyword you're looking for in the regexp:
72+
73+
``` javascript
74+
import config from 'app/config-APP_TARGET';
75+
console.log(config.title);
76+
```
77+
78+
And now you just get the right config imported depending on which target you're building for:
79+
80+
``` shell
81+
webpack --env.APP_TARGET VERSION_A
82+
=> 'I am version A'
83+
84+
webpack --env.APP_TARGET VERSION_B
85+
=> 'I am version B'
86+
87+
```

0 commit comments

Comments
 (0)