Javascript Webpack 错误 bundle.js:1 Uncaught SyntaxError: Unexpected token <
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44541165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack error bundle.js:1 Uncaught SyntaxError: Unexpected token <
提问by Stefan Hansch
I running server localhost and get error bundle.js:1 Uncaught SyntaxError: Unexpected token <In output bundle.js is html code of index.html file. This is setting my webpack.config file. Can you please tell me what wrong with setting?
我运行服务器 localhost 并得到错误bundle.js:1 Uncaught SyntaxError: Unexpected token <在输出中 bundle.js 是 index.html 文件的 html 代码。这是设置我的 webpack.config 文件。你能告诉我设置有什么问题吗？
import path from 'path';
import webpack from 'webpack';
export default {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client',
path.join(__dirname, '/client/index.js' )
],
output: {
path: '/',
publicPath: '/'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'client'),
loaders: ['react-hot-loader', 'babel-loader' ]
}
]
},
resolve: {
extensions: ['.js']
}
}
index.html
索引.html
<html>
<head>
<meta charset="UTF-8">
<title>Site</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
<h1>Hello bla bla bla</h1>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
server/index.js
服务器/index.js
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddeleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config';
let app = express();
const compiler = webpack(webpackConfig);
app.use(webpackMiddeleware(compiler, {
hot: true,
publicPath: webpackConfig.output.publicPath,
noInfo: true
}));
app.use(webpackHotMiddleware(compiler));
app.get('/*', (req, res)=>{
res.sendFile(path.join(__dirname, './index.html'));
});
app.listen('3000', ()=>{console.log('Running on port 3000')});
client/index.js
客户端/index.js
import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
render(<App/>, document.getElementById('app'));
components/App.js
组件/App.js
import React from 'react';
class App extends React.Component {
render(){
return (
<h1>Hello</h1>
);
}
}
export default App;
package.json:
包.json：
{
"name": "xxxxx",
"version": "1.0.0",
"description": "xxxxxxxxxx",
"main": "index.js",
"scripts": {
"server": "nodemon --watch server --exec babel-node -- server/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "xxxxxxxxxxxxx"
},
"keywords": [
"
],
"author": "xxxxxxxxx",
"license": "ISC",
"bugs": {
"url": "xxxxxxxxxxxxxxxxxxxxxxx"
},
"homepage": "xxxxxxxxxxxxxxxxxxxx",
"dependencies": {
"babel-cli": "^6.24.1",
"express": "^4.15.3",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"nodemon": "^1.11.0",
"react-hot-loader": "^1.3.1",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"
}
}
.babelrc
.babelrc
{
"presets": [ "es2015", "react" ]
}
Thank you.
谢谢你。
回答by enapupe
Your bundle.jssrc in your scripttag is wrong. It's returning your main index.html, that's why you are getting that error - the JS parser is trying to parse a HTML file.
你标签中的bundle.jssrcscript是错误的。它正在返回您的 main index.html，这就是您收到该错误的原因 - JS 解析器正在尝试解析 HTML 文件。
You must add a slash to your script src:
<script src="/bundle.js"></script>
您必须在脚本 src 中添加斜杠：
<script src="/bundle.js"></script>
If that doesn't work you must double-check your outputconfig.
如果这不起作用，您必须仔细检查您的output配置。
回答by Tuko90
You are using multiple entry points but not setting up the output.
您正在使用多个入口点但未设置输出。
回答by Oleg Rostov
I've solved this issue by adding filenameitem to object output:
我通过将filename项目添加到对象输出解决了这个问题：
output: {
path: '/',
filename: 'bundle.js'
},
