Skip to content

Commit 6540bbf

Browse files
bebrawbebraw
authored
Merge pull request #717 from simon04/plugins
Add/extend plugin documentation
2 parents 124651d + 2bc4e06 commit 6540bbf

File tree

5 files changed

+104
-3
lines changed

5 files changed

+104
-3
lines changed

‎content/plugins/environment-plugin.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: environment-plugin
3+
contributors:
4+
- simon04
5+
---
6+
7+
The environment-plugin is a shorthand for using the [define-plugin](/plugins/define-plugin)
8+
on [`process.env`](https://nodejs.org/api/process.html#process_process_env) keys.
9+
10+
**Example:**
11+
12+
```javascript
13+
new webpack.EnvironmentPlugin([
14+
'NODE_ENV'
15+
])
16+
```
17+
18+
This is equivalent to the following define-plugin application:
19+
20+
```javascript
21+
new webpack.DefinePlugin({
22+
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
23+
})
24+
```

‎content/plugins/html-webpack-plugin.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: html-webpack-plugin
3+
contributors:
4+
- ampedandwired
5+
- simon04
6+
---
7+
8+
The [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) simplifies creation of HTML files to serve your
9+
webpack bundles. This is especially useful for webpack bundles that include
10+
a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply
11+
your own template using [lodash templates](https://lodash.com/docs#template), or use your own [loader](/loaders).
12+
13+
## Installation
14+
```
15+
$ npm install html-webpack-plugin --save-dev
16+
```
17+
18+
## Basic Usage
19+
20+
The plugin will generate an HTML5 file for you that includes all your webpack
21+
bundles in the body using `script` tags. Just add the plugin to your webpack
22+
config as follows:
23+
24+
```javascript
25+
var HtmlWebpackPlugin = require('html-webpack-plugin');
26+
var webpackConfig = {
27+
entry: 'index.js',
28+
output: {
29+
path: 'dist',
30+
filename: 'index_bundle.js'
31+
},
32+
plugins: [new HtmlWebpackPlugin()]
33+
};
34+
```
35+
36+
This will generate a file `dist/index.html` containing the following:
37+
```html
38+
<!DOCTYPE html>
39+
<html>
40+
<head>
41+
<meta charset="UTF-8">
42+
<title>Webpack App</title>
43+
</head>
44+
<body>
45+
<script src="index_bundle.js"></script>
46+
</body>
47+
</html>
48+
```
49+
50+
If you have multiple webpack entry points, they will all be included with `script`
51+
tags in the generated HTML.
52+
53+
If you have any CSS assets in webpack's output (for example, CSS extracted
54+
with the [ExtractTextPlugin](/plugins/extract-text-webpack-plugin))
55+
then these will be included with `<link>` tags in the HTML head.
56+
57+
## Configuration
58+
59+
For all configuration options, please see the
60+
[plugin documentation](https://github.com/ampedandwired/html-webpack-plugin#configuration).
61+
62+
63+
## Third party addons
64+
65+
The plugin supports addons. For a list see the
66+
[documentation](https://github.com/ampedandwired/html-webpack-plugin#third-party-addons).

‎content/plugins/index.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
---
22
title: Plugins
3+
contributors:
4+
- simon04
35
---
46

5-
?> TODO
7+
webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**.
8+
9+
|Name|Description|
10+
|:--:|:----------|
11+
|[commons-chunk-plugin](/plugins/commons-chunk-plugin)|Generates chunks of common modules shared between entry points and splits them into separate bundles, e.g., `1vendor.bundle.js` && `app.bundle.js`|
12+
|[extract-text-webpack-plugin](/plugins/extract-text-webpack-plugin)|Extracts Text (CSS) from your bundles into a separate file (app.bundle.css)|
13+
|[component-webpack-plugin](/plugins/component-webpack-plugin)|Use components with webpack|
14+
|[compression-webpack-plugin](/plugins/compression-webpack-plugin)|Prepare compressed versions of assets to serve them with Content-Encoding|
15+
|[i18n-webpack-plugin](/plugins/i18n-webpack-plugin)|Adds i18n support to your bundles|
16+
|[html-webpack-plugin](/plugins/html-webpack-plugin)| Simplifies creation of HTML files (`index.html`) to serve your bundles|

‎content/plugins/source-map-dev-tool-plugin.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: source-map-dev-tool-plugin.md
2+
title: source-map-dev-tool-plugin
33
contributors:
44
- johnnyreilly
55
---

‎scripts/deploy.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ SOURCE_BRANCH="master"
77
# Pull requests and commits to other branches shouldn't try to deploy, just build to verify
88
if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then
99
echo "Skipping deploy; just doing a build and linting links/prose/js."
10+
npm run fetch
1011
npm run build
11-
# npm run fetch - Relies on third party files, disabled for now
1212
npm run lint:js
1313
npm run lint:prose
1414
npm run lint:links

0 commit comments

Comments
 (0)