Почему мой HTML-файл может «видеть» только файлы JavaScript в папке Dist? - PullRequest
0 голосов
/ 18 октября 2018

Я создаю простую, не React, HTML-страницу для мониторинга веб-проверки в приложении React .Эта HTML-страница называется specRunner.html.Из specRunner.html я хочу вызвать некоторые файлы JavaScript, но у меня возникают трудности с обращением к ним из моего html-файла.

Если говорить точнее, мой файл specRunner.html может «видеть» только файлы JS, если они хранятся в папке client / dist моего каталога.Я думал, что неправильно формировал путь к файлу в теге, но сейчас я его протестировал и могу последовательно обращаться к файлу JS, но только если этот файл JS находится в папке client / dist.Само собой разумеется, я не могу поместить свой файл node_modules в мою папку client / dist.

Чтобы быть точным, я могу подавать html файлов из любой точки моего каталога (то есть, моего узла-express app не ограничивается файлом client / dist при получении файлов для обслуживания), но мои html-файлы не могут найти js-файлы, если файл js не находится в файле client / 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.

Вот ошибка консоли Chrome, когда файл находится где угодно, но не в папке dist:

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

Благодарен за любые указатели!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...