javascript - 为什么我的 HTML 文件只能“看到” Dist 文件夹中的 JavaScript 文件？

Question

我正在构建一个简单的、非 React 的 html 页面，用于在 React App中进行 webcheck 监控。此 html 页面称为 specRunner.html。我希望从 specRunner.html 中调用一些 JavaScript 文件，但在我的 html 文件中引用它们时遇到了困难。

具体来说，如果我的 specRunner.html 文件存储在我的目录的 client/dist 文件夹中，则它们只能“查看”JS 文件。我以为我在标签中形成的文件路径不正确，但是我现在已经对其进行了测试，并且可以始终如一地访问 JS 文件，但前提是该 JS 文件位于 client/dist 文件夹中。不用说，我不能把我的 node_modules 文件放在我的 client/dist 文件夹中。

具体来说，我可以从目录中的任何位置提供html文件（即，我的 node-express 应用程序在检索要服务的文件时不限于 client/dist 文件），但我的 html 文件找不到 js 文件，除非js 文件位于客户端/dist 文件中。

File structure:
root
--client
----dist
------bundle.js (for the React App)
------index.html (for the React App)
------specRunner.html (<-- my webcheck page I'm working on)
------example.js (<-- example file I'm trying to access from my specRunner.html)
----src
------React stuff
--node_modules (<-- the files I REALLY want to reference from specRunner.html)
--server
--etc.

当文件位于 dist 文件夹之外的任何位置时，这是 Chrome 控制台错误：

Uncaught SyntaxError: Unexpected token <        example.js:1

如果我查看源选项卡，我可以看到 example.js 文件的内容是我的服务器的默认端点 html 页面的 html，用于任何无效的端点调用。

这一定是一些 React 问题，即使这个端点没有涉及 React 组件。

这是我的 webpack.config：

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/client/dist');

module.exports = {
    entry: `${SRC_DIR}\\index.js`,
    output: {
      path: path.resolve(__dirname, 'client/dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.jsx?/,
          include: SRC_DIR,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
            plugins: ['syntax-dynamic-import'],
          },
        },
        {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader'],
          include: SRC_DIR,
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
        },
      }),
      new ExtractTextPlugin("styles.css"),
    ],
  };
  

感谢任何指针！

标签： javascripthtmlreactjsfilewebpack