我无法测试使用WebPack开发的我的React网页。我正在尝试运行快速服务器，但控制台消息Uncaught SyntaxError: Unexpected token <却保持空白的本地主机页面。网页似乎可以找到我的index.html文件，该文件又将其指向由webpack创建的bundle.js文件，但是由于某种原因，我的bundle.js文件显示为空，我相信吗？这是我第一次使用webpack，所以我还是比较陌生。我将在目录结构，webpack.config.js文件，server.js文件和index.html文件的下面张贴图片/摘要。在此先非常感谢您，我还是webpack的新手，这是我第一次尝试实际使用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>
chrome dev tools network results
我的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正在为所有请求提供index.html。
这意味着当浏览器请求bundle.js时，server.js再次返回index.html。错误来自浏览器试图将接收到的HTML解析为JavaScript代码。
您的bundle.js可能不在index.html的同一个文件夹中，否则express会为其提供服务（因为app.use(express.static(__dirname));行）。
因此请仔细检查bundle.js的路径。它应该位于__dirname（即${__dirname}/bundle.js
从您发布的图片中，${__dirname}/bundle.js和there is no bundle.js in the dist/ folder所在的bundle.js。
您必须生成捆绑包。您说dist/，您的index.html是：
server.js要生成捆绑包，则应添加一个from the comments脚本并执行它。
将此添加到您的package.json scripts：
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
所以现在是这样的：
build现在运行scripts（或"build": "webpack --mode production",
）。 "scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
现在应该在npm run build文件夹中。
请记住，如果您曾经部署过它，则在提供它时应将yarn build和build.js都放在同一个文件夹中。