Skip to content

Commit 72552e9

Browse files
shaodahongskipjack
authored andcommitted
docs(plugins): add two more small plugins (#1392)
Document the `HashedModuleIdsPlugin` and `NamedModulesPlugin`. Update the pages related to this plugin providing links to the new plugins.
1 parent 1a942ab commit 72552e9

File tree

4 files changed

+49
-5
lines changed

4 files changed

+49
-5
lines changed

content/guides/caching.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -155,9 +155,7 @@ A sample output when using `WebpackManifestPlugin` in our config looks like:
155155
## Deterministic hashes
156156

157157
To minimize the size of generated files, webpack uses identifiers instead of module names. During compilation, identifiers are generated, mapped to chunk filenames and then put into a JavaScript object called *chunk manifest*.
158-
To generate identifiers that are preserved over builds, webpack supplies the `NamedModulesPlugin` (recommended for development) and `HashedModuleIdsPlugin` (recommended for production).
159-
160-
?> When exist, link to `NamedModulesPlugin` and `HashedModuleIdsPlugin` docs pages
158+
To generate identifiers that are preserved over builds, webpack supplies the [`NamedModulesPlugin`](/plugins/named-modules-plugin) (recommended for development) and [`HashedModuleIdsPlugin`](/plugins/hashed-module-ids-plugin) (recommended for production).
161159

162160
?> Describe how the option `recordsPath` option works
163161

content/plugins/commons-chunk-plugin.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,12 +111,12 @@ new webpack.optimize.CommonsChunkPlugin({
111111
<script src="app.js" charset="utf-8"></script>
112112
```
113113
114-
Hint: In combination with long term caching you may need to use the [`ChunkManifestWebpackPlugin`](https://github.com/diurnalist/chunk-manifest-webpack-plugin) to avoid that the vendor chunk changes. You should also use records to ensure stable module ids.
114+
T> In combination with long term caching you may need to use the [`ChunkManifestWebpackPlugin`](https://github.com/diurnalist/chunk-manifest-webpack-plugin) to avoid the vendor chunk changes. You should also use records to ensure stable module ids, e.g. using [`NamedModulesPlugin`](/plugins/named-modules-plugin) or [`HashedModuleIdsPlugin`](/plugins/hashed-module-ids-plugin).
115115
116116
117117
### Move common modules into the parent chunk
118118
119-
With [Code Splitting](/guides/code-splitting) multiple child chunks of an entry chunk can have common dependencies. To prevent duplication these can be moved into the parent. This reduces overall size, but does have a negative effect on the initial load time. If it is expected that users will need to download many sibling chunks, i.e. children of the entry chunk, then this should improve load time overall.
119+
With [Code Splitting](/guides/code-splitting), multiple child chunks of an entry chunk can have common dependencies. To prevent duplication these can be moved into the parent. This reduces overall size, but does have a negative effect on the initial load time. If it is expected that users will need to download many sibling chunks, i.e. children of the entry chunk, then this should improve load time overall.
120120
121121
```javascript
122122
new webpack.optimize.CommonsChunkPlugin({
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: HashedModuleIdsPlugin
3+
contributors:
4+
- shaodahong
5+
---
6+
7+
This plugin will cause hashes to be based on the relative path of the module, generating a four character string as the module id. Suggested for use in production.
8+
9+
``` js
10+
new webpack.HashedModuleIdsPlugin({
11+
// Options...
12+
})
13+
```
14+
15+
16+
## Options
17+
18+
This plugin supports the following options:
19+
20+
- `hashFunction`: The hashing algorithm to use, defaults to `'md5'`. All functions from Node.JS' [`crypto.createHash`](https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm) are supported.
21+
- `hashDigest`: The encoding to use when generating the hash, defaults to `'base64'`. All encodings from Node.JS' [`hash.digest`](https://nodejs.org/api/crypto.html#crypto_hash_digest_encoding) are supported.
22+
- `hashDigestLength`: The prefix length of the hash digest to use, defaults to `4`.
23+
24+
25+
## Usage
26+
27+
Here's an example of how this plugin might be used:
28+
29+
``` js
30+
new webpack.HashedModuleIdsPlugin({
31+
hashFunction: 'sha256',
32+
hashDigest: 'hex',
33+
hashDigestLength: 20
34+
})
35+
```
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: NamedModulesPlugin
3+
contributors:
4+
- shaodahong
5+
---
6+
7+
This plugin will cause the relative path of the module to be displayed when [HMR](/guides/hot-module-replacement) is enabled. Suggested for use in development.
8+
9+
``` js
10+
new webpack.NamedModulesPlugin()
11+
```

0 commit comments

Comments
 (0)