Webpack Dev Server error with multiple entry points for React App with Hooks

Question

My react app with hooks was working fine with webpack devserver prior to converting config to allow for multiple entry points. Now when I run the same script script webpack-dev-server --hot --mode development --env.NODE_ENV=development and open http://localhost:8080/ in browser I get "Cannot GET /". What am I doing wrong?

Terminal output looks good after build:

$ webpack-dev-server --hot --mode development --env.NODE_ENV=development
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from {removed for brevity}/dist
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: e45f7a36fc8bdca8edb6
Version: webpack 4.42.0
Time: 4904ms
Built at: 08/11/2020 11:40:59 AM
                               Asset        Size  Chunks             Chunk Names
                   ./dist/index.html  1010 bytes          [emitted]  
                   ./dist/print.html  1010 bytes          [emitted]  
076203c089fb8776a9af1f774cca729a.png    7.33 KiB          [emitted]  
27119dc6caf0ef34579277fc47e04091.png    11.3 KiB          [emitted]  
2fde2afc1b2f2678017866b0a842c0f0.png    7.67 KiB          [emitted]  
388452a294715e1e38697b924415be4c.png    8.88 KiB          [emitted]  
499d9b545f4bf7448efd79a05ae50fa9.png    10.4 KiB          [emitted]  
4cfb1ea673e03372d54851addd95ffab.png    9.54 KiB          [emitted]  
54aa24ec5557c031f59f289549d07173.png    7.32 KiB          [emitted]  
5595fac7e9b84956c198eaf540871984.png    9.69 KiB          [emitted]  
5b9c2d4502db2a878afb7d19ad503ac9.png    11.1 KiB          [emitted]  
76e59fbcc35839483d0fd8230030f913.png    8.66 KiB          [emitted]  
9ced9326d0e5dce271a86da72ae44738.png    9.19 KiB          [emitted]  
a90a0f1edeee86e4dd49d5c07b595ac6.png    8.43 KiB          [emitted]  
a9df77f8fe5132a8d87b6f627b4d3e8b.png    8.71 KiB          [emitted]  
ab593d72a87c73c68553a3eeba4e6f1f.png    8.61 KiB          [emitted]  
ad067419ad4dbb0328b8d6783b67ed7d.png    6.33 KiB          [emitted]  
b31cbc0aedab9315d89741eeaa3ed92f.png    7.42 KiB          [emitted]  
e5de86ef1e9260949fcd0c943f6f89ea.png    8.49 KiB          [emitted]  
ed53543f8b1bf19705296379f388a27c.png    9.65 KiB          [emitted]  
f1f6630ed0b4e032e13acfc907f6a7b8.png    7.09 KiB          [emitted]  
f204d56ec1f719e19b06b922d4c38ace.png    9.62 KiB          [emitted]  
                             main.js    6.75 MiB    main  [emitted]  main
                            print.js     899 KiB   print  [emitted]  print
Entrypoint main = main.js
Entrypoint print = print.js

Here's my webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    main: ["@babel/polyfill", "./src/index.js"],
    print: ["@babel/polyfill", "./src/print.js"],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    publicPath: "/",
  },
  module: {
    rules: [
      { 
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|ico)$/,
        loader: "file-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      chunks: ["main"],
      filename: "./dist/index.html",
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      chunks: ["print"],
      filename: "./dist/print.html",
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    historyApiFallback: true,
  },
  resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom",
    },
  },
};

Here's my main chunk root index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.querySelector("#root"));

Then, main App component rendered:

import { hot } from "react-hot-loader/root";
import React from "react";
import { Router, Switch } from "react-router-dom";
import history from "./history";
import { AuthProvider } from "./context/auth";

const App = () => {
  return (
    <AuthProvider>
        <Router history={history}>
          <Switch> ... </Switch>
        </Router>
    </AuthProvider>
  );
};

export default hot(App);

Lastly, my print chunk root print.js:

console.log("Hello, Wrold!");

Thanks in advance for any help!