Skip to content

Commit

Permalink
docs: add verbose entry point docs (#136)
Browse files Browse the repository at this point in the history
  • Loading branch information
shellscape authored and matheus1lva committed May 6, 2019
1 parent 50f0383 commit b372f05
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 0 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ module.exports = {

```

_Note: For more information and examples on configuring the `entry` property, please see the [Configuring Entry Points](./entry-points.md) recipe._

And run `webpack`:

```console
Expand Down
1 change: 1 addition & 0 deletions recipes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Recipes are snippets of code and useful tidbits that may be helpful to developer
🍳 What's Cooking:

[Bonjour Broadcast](./bonjour-broadcast.md)<br/>
[Configuring Entry Points](./entry-points.md)<br/>
[Custom Headers](./custom-headers.md)<br/>
[Multi Entry Setup](./multi-entry.md)<br/>
[Proxies](./proxies.md)<br/>
Expand Down
94 changes: 94 additions & 0 deletions recipes/entry-points.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
## 🍲 Configuring `entry` With webpack-plugin-serve

There are multiple patterns available for configuring the entry point for a `webpack` bundle, and these are [fairly well documented](https://webpack.js.org/concepts/entry-points/). However, adding an additional resource to an entry, as required by `webpack-plugin-serve`, may not be straight-forward for users unfamiliar with configuration customization. We'll outline several different methods below.

### Meat and Potatoes

Consider the following `webpack` configurations, before and after adding the `webpack-plugin-serve` client entry:

#### A single `String` entry

```js
// before
module.exports = {
entry: 'dist/bundle.js'
};
```

```js
// after
module.exports = {
entry: ['dist/bundle.js', 'webpack-plugin-serve/client']
};
```

#### An `Array` of `String` entry

```js
// before
module.exports = {
entry: [
'dist/bundle.js',
'dist/worker.js'
]
};
```

```js
// after
module.exports = {
entry: [
'dist/bundle.js',
'dist/worker.js',
'webpack-plugin-serve/client'
]
};
```

#### An `Object` of defining a single `String` entry

```js
// before
module.exports = {
entry: {
main: 'dist/bundle.js'
}
};
```

```js
// after
module.exports = {
entry: {
main: ['dist/bundle.js', 'webpack-plugin-serve/client']
}
};
```

#### An `Object` of defining multiple `String` entries

If there are multiple entry points defined for your bundle, and you'd like each entry point to support features like Hot Module Reloading, the `webpack-plugin-serve` client script must be added to each:

```js
// before
module.exports = {
entry: {
main: 'dist/bundle.js',
worker: 'dist/worker.js'
}
};
```

```js
// after
module.exports = {
entry: {
main: ['dist/bundle.js', 'webpack-plugin-serve/client'],
worker: ['dist/worker.js', 'webpack-plugin-serve/client']
}
};
```

### 🍰 Dessert

The examples above outline how the `webpack-plugin-serve/client` script can be added to several common `entry` patterns. The important bit is that the value, whether it be a single entry point or an `Object` with properties, be transformed into an array which includes an item with the `webpack-plugin-serve` client script. Cheers, and good eating.

0 comments on commit b372f05

Please sign in to comment.