javascript - 如何使用 Webpack 4 为 React 16 生成默认 index.html？

Question

注意。我知道如何实现我的目标。问题不是“如何做X”，而是“如何顺利地做X”。我正在寻找一种像老板一样的方式来达到结果。

我正在建立一个基于 Webpack 的新 React 应用程序。出于教育目的，我想从头开始。在当前阶段，我正在正确编译所有文件，只缺少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")
);

现在，我知道我可以使用选项模板内容，但是对于这样一个简单的注入来说，工作量很大。还有可能与HTML Webpack 模板一起使用的选项模板，但这似乎并没有像这里举例说明的那样工作少得多。

在我看来，React 作为一个如此受欢迎的库，应该能够以更简单的方式生成默认文档，其中包含可通过简单选项注入的引导元素。所以我希望有一种简洁而正确的方法来生成一个index.html文件，该文件包含一个 DIV（或一系列 DIV），其中 ID 作为参数传入。

有没有这样的方法，它是什么样子的？

编辑

请求了我的配置文件。下面是相关部分。它正在应用 HTML Webpack 模板并完成这项工作。然而，问题是它是否可以在没有它的情况下完成，只使用插件（甚至更好 - 甚至不使用插件）。

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

标签： javascripthtmlreactjswebpack