У меня проблемы с тестированием моей реагирующей веб-страницы, разработанной с использованием WebPack.Я пытаюсь запустить экспресс-сервер и получаю пустую страницу localhost с консольным сообщением Uncaught SyntaxError: Unexpected token <.Похоже, что веб-страница может найти мой файл index.html, который, в свою очередь, указывает на файл bundle.js, созданный webpack, но по какой-то причине мой файл bundle.js выглядит пустым, я полагаю?Это мой первый раз, когда я использую webpack, поэтому я все еще относительно новичок в этом.Ниже я опубликую изображения / фрагменты моей структуры каталогов, файла webpack.config.js, файла server.js и файла index.html.Заранее большое спасибо, снова я новичок в вебпаке, и я впервые пытаюсь развернуть его с помощью экспресс с вебпаком. Мое приложение реакции работает нормально, используя, кстати, webpack-dev-server, так что это не так.
Моя структура каталогов
структура каталогов
Мой webpack.config.js файл
const webpack = require('webpack');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
module.exports = {
entry: ['babel-polyfill','./src/index.js'],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new MomentLocalesPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}
};
Мой server.js файл
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'index.html'));
});
app.listen(port, () => {
console.log('listening on port ' + port);
console.log(__dirname);
});
Мой index.html файл
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<div id='app'></div>
<script src="/bundle.js"></script>
</body>
</html>
Сетевые результаты Dev Tools
Сетевые результаты Chrome Dev Tools
EDIT
Мой server.js файл теперь редактируется, как показано ниже.Я получил первую ошибку, но теперь он не может найти мой файл bundle.js?Ниже я выложу изображение ошибки регистрации из моего терминала git bash.Консоль Chrome Dev Tools также выдает сообщение об ошибке 404.
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));
app.get('*', (req, res) => {
if (req.path.endsWith('bundle.js')) {
res.sendFile(path.resolve(__dirname, 'bundle.js'));
} else {
res.sendFile(path.resolve(__dirname, 'index.html'));
}
});
/*
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'index.html'));
});
*/
app.listen(port, () => {
console.log('listening on port ' + port);
console.log(__dirname);
});
ошибка регистрации
Большое спасибо!