To copy our src/index.html file across, we can use the aptly-named Copy Webpack plugin (copy-webpack-plugin). As its name suggests, this plugin copies individual files or entire directories to the build directory. Let's install it with yarn.

$ yarn add copy-webpack-plugin --dev

And add the plugin to our webpack.config.js.

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  entry: { ... },
  output: { ... },
  module: { ... },
  plugins: [
    new CopyWebpackPlugin(['src/index.html'])
  ],
};

The CopyWebpackPlugin constructor has the following signature:

CopyWebpackPlugin([ ...patterns ], options)

Here,patterns specifies a set of matching files it should copy. We are simply specifying a single file.

Run webpack again and you'll see both bundle.js and index.html being written to the dist/ directory. We can now use the http-server package to serve the dist/ directory statically.

$ http-server dist/ -p 8200 --cors

You should be presented with the same Registration form as before. But now our code is much more modular.