Question

我正在构建一个简单的，非响应式的html页面，用于在React App中监控 web 。该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文件），但是我可以除非js文件位于client / dist文件中，否则html文件无法找到js文件。

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"),
    ],
  };

感谢任何指针！

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

0 个答案: