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文件

1 个答案: