diff --git a/README.md b/README.md index 8648f69..7f613d0 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/recipes/README.md b/recipes/README.md index d48c9f6..6daec66 100644 --- a/recipes/README.md +++ b/recipes/README.md @@ -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)
+[Configuring Entry Points](./entry-points.md)
[Custom Headers](./custom-headers.md)
[Multi Entry Setup](./multi-entry.md)
[Proxies](./proxies.md)
diff --git a/recipes/entry-points.md b/recipes/entry-points.md new file mode 100644 index 0000000..9ee8545 --- /dev/null +++ b/recipes/entry-points.md @@ -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.