Question

NB。我知道如何实现自己的目标。问题不是“ 如何做X”，而是“如何平稳做X”。我正在寻找一种类似的方式来获得结果。

我正在基于Webpack设置一个新的React应用程序。出于教育目的，我想从头开始。在当前阶段，我正在正确地编译所有文件，只丢失了 index.html 。

根据Webpack docs，我可以使用插件来生成默认的 index.html 并使用certain options对其进行自定义。

该插件仅生成一个默认文档，不允许我向其中注入<div id="app"></div>之类的代码段。但是，与该元素相关的引导程序已经完成，如下所示。

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 template一起使用，但是似乎as exemplified here都没那么少。

在我看来，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"]
  })
],

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

0 个答案: