Skip to content

Commit 17abd03

Browse files
committed
Add define-plugin documentation
Copy of https://github.com/webpack/docs/wiki/list-of-plugins
1 parent adeda9f commit 17abd03

File tree

1 file changed

+58
-0
lines changed

1 file changed

+58
-0
lines changed

content/plugins/define-plugin.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: DefinePlugin
3+
---
4+
5+
``` javascript
6+
new webpack.DefinePlugin(definitions)
7+
```
8+
9+
The `DefinePlugin` allows you to create global constants which can be configured at **compile** time. This can be very useful for allowing different behaviour between development builds and release builds. For example, you might use a global constant to determine whether logging takes place; perhaps you perform logging in your development build but not in the release build. That's the sort of scenario the `DefinePlugin` facilitates.
10+
11+
Example:
12+
13+
``` javascript
14+
new webpack.DefinePlugin({
15+
PRODUCTION: JSON.stringify(true),
16+
VERSION: JSON.stringify("5fa3b9"),
17+
BROWSER_SUPPORTS_HTML5: true,
18+
TWO: "1+1",
19+
"typeof window": JSON.stringify("object")
20+
})
21+
```
22+
23+
``` javascript
24+
console.log("Running App version " + VERSION);
25+
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
26+
```
27+
28+
Each key passed into `DefinePlugin` is an identifier or multiple identifiers joined with `.`.
29+
30+
* If the value is a string it will be used as a code fragment.
31+
* If the value isn't a string, it will be stringified (including functions).
32+
* If the value is an object all keys are defined the same way.
33+
* If you prefix `typeof` to the key, it's only defined for typeof calls.
34+
35+
The values will be inlined into the code which allows a minification pass to remove the redundant conditional.
36+
37+
Example:
38+
39+
``` javascript
40+
if (!PRODUCTION)
41+
console.log('Debug info')
42+
if (PRODUCTION)
43+
console.log('Production log')
44+
`````
45+
After passing through webpack with no minification results in:
46+
47+
``` javascript
48+
if (!true)
49+
console.log('Debug info')
50+
if (true)
51+
console.log('Production log')
52+
```
53+
54+
and then after a minification pass results in:
55+
56+
``` javascript
57+
console.log('Production log')
58+
```

0 commit comments

Comments
 (0)