Webpack错误bundle.js:1未捕获的语法错误:意外令牌< [英] Webpack error bundle.js:1 Uncaught SyntaxError: Unexpected token <
问题描述
我正在运行服务器localhost，并收到错误 bundle.js:1未捕获的SyntaxError:意外的令牌< 在输出中，bundle.js是index.html文件的html代码.这是设置我的webpack.config文件.您能告诉我设置有什么问题吗?
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?
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>
<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
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
import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
render(<App/>, document.getElementById('app'));
components/App.js
import React from 'react';
class App extends React.Component {
render(){
return (
<h1>Hello</h1>
);
}
}
export default App;
package.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
{
"presets": [ "es2015", "react" ]
}
谢谢.
推荐答案
您的 script 标记中的 bundle.js src错误.它返回您的主要 index.html ，这就是您收到该错误的原因-JS解析器正在尝试解析HTML文件.
Your bundle.js src in your script tag 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.
您必须在脚本src中添加斜杠:< script src ="/bundle.js"></script>
You must add a slash to your script src:
<script src="/bundle.js"></script>
如果这不起作用，则必须仔细检查您的 output 配置.
If that doesn't work you must double-check your output config.
这篇关于Webpack错误bundle.js:1未捕获的语法错误:意外令牌<的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
