entry-points.md

🍲 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. 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

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

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

An Array of String entry

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

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

An Object of defining a single String entry

// before
module.exports = {
  entry: {
    main: 'dist/bundle.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:

// before
module.exports = {
  entry: {
    main: 'dist/bundle.js',
    worker: 'dist/worker.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.