我在测试使用 Webpack 开发的 React 网页时遇到了问题。我试图运行一个 express 服务器,但始终得到一个空白的本地页面,并显示控制台消息 Uncaught SyntaxError: Unexpected token <
。看起来这个网页能够找到我的 index.html 文件,然后它指向由 webpack 创建的 bundle.js 文件,但出于某种原因,我认为我的 bundle.js 文件是空的?这是我第一次使用 webpack,所以我对此还比较新手。下面我将发布我的目录结构、webpack.config.js
文件、server.js
文件和 index.html
文件的图片/片段。非常感谢你的帮助,再次说明,我是新手,这是我第一次尝试使用 express 部署 webpack。顺便说一句,我的 React 应用程序使用 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>
开发工具网络结果
编辑
我的server.js
文件已根据下面所示进行了编辑。我已经解决了第一个错误,但现在它无法找到我的bundle.js文件?我将在下面发布来自git bash终端的日志错误图片。Chrome开发工具控制台也给出了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);
});
非常感谢!
server.js
之前,你应该生成bundle.js
文件并将其放置在dist/
目录下。 - acdcjuniorpackage.json
中的scripts
部分吗? - acdcjuniorbuild
目标脚本。你需要添加一个(在我上一条评论的指示之前,它是无法工作的),给我一分钟。 - acdcjuniornpm start
,也许我需要改变我的启动脚本? - austinw