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

【问题标题】：React boilerplate doesn't load js files in the index.htmlReact 样板不会在 index.html 中加载 js 文件
【发布时间】：2017-10-20 12:24:17
【问题描述】：

我正在测试 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 文件。

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

【问题讨论】：

我怀疑您正在请求丢失的资源，因此返回了 404-html 页面。
@Caramiriel 这是一个错误的输入......但这并不重要，因为 myJScriptFile1.js 也会返回相同的错误。
能贴出你的js代码吗？
我没有发布我的代码吗？
那只是你的index.html。

标签： javascript reactjs boilerplate

【解决方案1】：

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

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

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

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

就是这样。

【讨论】：