React 样板文件不会在 index.html 中加载 js 文件

Question

我正在测试 React-boilerplate，我正在尝试在 app/index.html 文件中加载一些 javascript 文件：

<!doctype html>
<html lang="en">
  <head>
    <!-- The first thing in any HTML file should be the charset -->
    <meta charset="utf-8">
    <!-- Make the page mobile compatible -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Allow installing the app to the homescreen -->
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">

    <script type="text/javascript" src="myJScriptFile1.js"></script>
    <script type="text/javascript" src="myJScriptFile2.js"></script>
  </head>
  <body>
    <!-- Display a message if JS has been disabled on the browser. -->
    <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>

    <!-- The app hooks into this div -->
    <div id="app"></div>
    <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
  </body>
</html>

这是默认的 index.html 文件。我运行它与 npm 或 yarn 并且服务器控制台没有显示错误，但我的浏览器控制台一直告诉我：

Uncaught SyntaxError: Unexpected token <

就这样，再没有报错了。这些 javascript 文件工作正常，因为我将它们用于另一个基于 React 的项目，并且我也将它们调用到 index.html 文件中。控制台打印每个文件的错误。如果我跟踪错误，它会引导我找到相应的 .js 文件。

在网上搜索将近一周后，我找不到解决方案。就是这样，有人知道如何解决这个问题吗？

Answer 1

好吧，我在回答自己。我需要对 webpack 进行更多研究。我是通过 webpack 实现的：

已安装npm i add-asset-html-webpack-plugin -D

然后，在 webpack 配置文件中，在我添加的插件下：

new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })

就是这样。

React 样板文件不会在 index.html 中加载 js 文件

React boilerplate doesn't load js files in the index.html

javascript

reactjs

boilerplate