Я создаю простую, не 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"),
],
};
Благодарен за любые указатели!