Как создать файл index.html по умолчанию для React 16 с помощью Webpack 4?

Question

NB. Я знаю, как достичь своей цели. Вопрос не в том, " как сделать Х", а в том, "как гладко 1005 * сделать Х". Я ищу способ, похожий на босса, для достижения результата.

Я устанавливаю новое приложение React на основе Webpack. В образовательных целях я хочу сделать это с нуля. На текущем этапе я правильно переношу все файлы, пропуская только index.html .

В соответствии с Документами Webpack Я могу использовать плагин для генерации index.html по умолчанию и настройки его, используя определенные опции .

Плагин генерирует только документ по умолчанию, не позволяющий мне вставлять в него фрагмент вроде <div id="app"></div>. Однако начальная загрузка приложения React выполняется по отношению к такому элементу, как показано ниже.

import * as React from "react";
import * as ReactDOM from "react-dom";
import NavBar from "./components/NavBar";

ReactDOM.render(
  <NavBar />,
  document.getElementById("app")
);

Теперь я понимаю, что могу использовать опцию templateContent , но для такой простой инъекции много работы. Также есть опция template , которую можно использовать с шаблоном HTML Webpack , но это, похоже, не так уж и плохо, как и , как показано здесь .

Мне кажется, что React, будучи такой популярной библиотекой, должен позволить более простой способ создания документа по умолчанию, который содержит элементы начальной загрузки, вставляемые с помощью простой опции. Поэтому я ожидаю, что есть аккуратный и правильный способ создания index.html файла, содержащего DIV (или серию DIV) с идентификаторами, переданными в качестве параметра.

Существует ли такой метод и как он выглядит?

редактировать

Мой файл конфигурации был запрошен. Ниже соответствующая часть. Он применяет шаблон HTML Webpack и выполняет свою работу. Однако вопрос в том, можно ли это сделать без него, используя только плагин (или даже лучше - даже без использования плагина).

plugins: [
  new CleanWebpackPlugin(["dist"]),
  new HtmlWebpackPlugin({
    title: "Reactify Poc",
    favicon: "",
    inject: false,
    template: HtmlWebpackTemplate,
    appMountIds: ["nav", "app"]
  })
],